diff --git a/packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx index 44a4d8d8893be..1bddf0b60737b 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx @@ -235,7 +235,7 @@ describe(' - Column Headers', () => { clock.runToLast(); const menu = screen.queryByRole('menu'); - const unsortMenuitem = screen.queryByRole('menuitem', { name: /unsort/i }); + const unsortMenuitem = screen.queryByRole('menuitem', { name: 'Sort by DESC' }); expect(menu).toHaveFocus(); fireEvent.keyDown(menu, { key: 'ArrowDown' }); diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx index 29d6f366f1b5e..26e73ba05efc0 100644 --- a/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx +++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/SortGridMenuItems.tsx @@ -6,11 +6,13 @@ import { gridSortModelSelector } from '../../../hooks/features/sorting/gridSorti import { GridSortDirection } from '../../../models/gridSortModel'; import { useGridApiContext } from '../../../hooks/utils/useGridApiContext'; import { GridFilterItemProps } from './GridFilterItemProps'; +import { useGridRootProps } from '../../../hooks/utils/useGridRootProps'; -const SortGridMenuItems = (props: GridFilterItemProps) => { +function SortGridMenuItems(props: GridFilterItemProps) { const { column, onClick } = props; const apiRef = useGridApiContext(); const sortModel = useGridSelector(apiRef, gridSortModelSelector); + const rootProps = useGridRootProps(); const sortDirection = React.useMemo(() => { if (!column) { @@ -20,33 +22,49 @@ const SortGridMenuItems = (props: GridFilterItemProps) => { return sortItem?.sort; }, [column, sortModel]); + const sortingOrder = React.useMemo( + () => column.sortingOrder ?? rootProps.sortingOrder, + [column, rootProps], + ); + const onSortMenuItemClick = React.useCallback( (event: React.MouseEvent) => { onClick(event); - const direction = event.currentTarget.getAttribute('data-value') || null; + const direction = event.currentTarget.getAttribute('data-value'); apiRef.current.sortColumn(column!, direction as GridSortDirection); }, [apiRef, column, onClick], ); + const getSortKey = React.useCallback((direction: GridSortDirection) => { + if (direction === 'asc') { + return 'columnMenuSortAsc'; + } + if (direction === 'desc') { + return 'columnMenuSortDesc'; + } + return 'columnMenuUnsort'; + }, []); + if (!column || !column.sortable) { return null; } return ( - - {apiRef.current.getLocaleText('columnMenuUnsort')} - - - {apiRef.current.getLocaleText('columnMenuSortAsc')} - - - {apiRef.current.getLocaleText('columnMenuSortDesc')} - + {sortingOrder.map((direction) => ( + + {apiRef.current.getLocaleText(getSortKey(direction))} + + ))} ); -}; +} SortGridMenuItems.propTypes = { // ----------------------------- Warning --------------------------------