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 (
-
-
-
+ {sortingOrder.map((direction) => (
+
+ ))}
);
-};
+}
SortGridMenuItems.propTypes = {
// ----------------------------- Warning --------------------------------