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 ac345d2fe112..62f2cd9a8879 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,14 @@ 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';
function SortGridMenuItems(props: GridFilterItemProps) {
const { column, onClick } = props;
const apiRef = useGridApiContext();
const sortModel = useGridSelector(apiRef, gridSortModelSelector);
+ const rootProps = useGridRootProps();
+ const sortingOrder: GridSortDirection[] = column.sortingOrder ?? rootProps.sortingOrder;
const sortDirection = React.useMemo(() => {
if (!column) {
@@ -35,15 +38,25 @@ function SortGridMenuItems(props: GridFilterItemProps) {
return (
-
-
-
+ {sortingOrder.includes(null) ? (
+
+ ) : null}
+ {sortingOrder.includes('asc') ? (
+
+ ) : null}
+ {sortingOrder.includes('desc') ? (
+
+ ) : null}
);
}
diff --git a/packages/grid/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx
index 60618f7c339d..5798a70caaba 100644
--- a/packages/grid/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx
+++ b/packages/grid/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx
@@ -117,4 +117,24 @@ describe(' - Column Headers', () => {
expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'brand']);
});
});
+
+ it('should display sort column menu items as per sortingOrder prop', () => {
+ render(
+
+
+
,
+ );
+ const columnCell = getColumnHeaderCell(0);
+ const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]');
+ fireEvent.click(menuIconButton);
+ clock.runToLast();
+
+ expect(screen.queryByRole('menuitem', { name: /asc/i })).not.to.equal(null);
+ expect(screen.queryByRole('menuitem', { name: /desc/i })).not.to.equal(null);
+ expect(screen.queryByRole('menuitem', { name: /unsort/i })).to.equal(null);
+ });
});