diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json
index 9c1b3c520566..755b38c48e84 100644
--- a/docs/pages/x/api/data-grid/data-grid-premium.json
+++ b/docs/pages/x/api/data-grid/data-grid-premium.json
@@ -664,6 +664,12 @@
"default": "GridColumnHeaderFilterIconButton",
"class": null
},
+ {
+ "name": "columnHeaderSortIcon",
+ "description": "Sort icon component rendered in each column header.",
+ "default": "GridColumnHeaderSortIcon",
+ "class": null
+ },
{
"name": "columnMenu",
"description": "Column menu component rendered by clicking on the 3 dots \"kebab\" icon in column headers.",
diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
index adac731e3a34..3829a0762d6a 100644
--- a/docs/pages/x/api/data-grid/data-grid-pro.json
+++ b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -599,6 +599,12 @@
"default": "GridColumnHeaderFilterIconButton",
"class": null
},
+ {
+ "name": "columnHeaderSortIcon",
+ "description": "Sort icon component rendered in each column header.",
+ "default": "GridColumnHeaderSortIcon",
+ "class": null
+ },
{
"name": "columnMenu",
"description": "Column menu component rendered by clicking on the 3 dots \"kebab\" icon in column headers.",
diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
index b7d2b16bc7ea..4d4ebb3a183c 100644
--- a/docs/pages/x/api/data-grid/data-grid.json
+++ b/docs/pages/x/api/data-grid/data-grid.json
@@ -497,6 +497,12 @@
"default": "GridColumnHeaderFilterIconButton",
"class": null
},
+ {
+ "name": "columnHeaderSortIcon",
+ "description": "Sort icon component rendered in each column header.",
+ "default": "GridColumnHeaderSortIcon",
+ "class": null
+ },
{
"name": "columnMenu",
"description": "Column menu component rendered by clicking on the 3 dots \"kebab\" icon in column headers.",
diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
index 7acafbb5fb7b..bc318d566f86 100644
--- a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
+++ b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
@@ -1218,6 +1218,7 @@
"columnFilteredIcon": "Icon displayed on the column header menu to show that a filter has been applied to the column.",
"columnHeaderFilterIconButton": "Filter icon component rendered in each column header.",
"columnHeaders": "Component responsible for rendering the column headers.",
+ "columnHeaderSortIcon": "Sort icon component rendered in each column header.",
"columnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.",
"columnMenuAggregationIcon": "Icon displayed in column menu for aggregation",
"columnMenuClearIcon": "Icon displayed in column menu for clearing values",
diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
index 65352ff84b61..5812ceb64406 100644
--- a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
+++ b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
@@ -1156,6 +1156,7 @@
"columnFilteredIcon": "Icon displayed on the column header menu to show that a filter has been applied to the column.",
"columnHeaderFilterIconButton": "Filter icon component rendered in each column header.",
"columnHeaders": "Component responsible for rendering the column headers.",
+ "columnHeaderSortIcon": "Sort icon component rendered in each column header.",
"columnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.",
"columnMenuClearIcon": "Icon displayed in column menu for clearing values",
"columnMenuFilterIcon": "Icon displayed in column menu for filter",
diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json
index 770bf5af8fa5..31ec9f91afa4 100644
--- a/docs/translations/api-docs/data-grid/data-grid/data-grid.json
+++ b/docs/translations/api-docs/data-grid/data-grid/data-grid.json
@@ -1045,6 +1045,7 @@
"columnFilteredIcon": "Icon displayed on the column header menu to show that a filter has been applied to the column.",
"columnHeaderFilterIconButton": "Filter icon component rendered in each column header.",
"columnHeaders": "Component responsible for rendering the column headers.",
+ "columnHeaderSortIcon": "Sort icon component rendered in each column header.",
"columnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.",
"columnMenuClearIcon": "Icon displayed in column menu for clearing values",
"columnMenuFilterIcon": "Icon displayed in column menu for filter",
diff --git a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx
index 2822705bf090..920c197c6da7 100644
--- a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx
+++ b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx
@@ -6,7 +6,6 @@ import { fastMemo } from '../../utils/fastMemo';
import { GridStateColDef } from '../../models/colDef/gridColDef';
import { GridSortDirection } from '../../models/gridSortModel';
import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
-import { GridColumnHeaderSortIcon } from './GridColumnHeaderSortIcon';
import { GridColumnHeaderSeparatorProps } from './GridColumnHeaderSeparator';
import { ColumnHeaderMenuIcon } from './ColumnHeaderMenuIcon';
import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';
@@ -248,11 +247,13 @@ function GridColumnHeaderItem(props: GridColumnHeaderItemProps) {
)}
{showSortIcon && (
-
)}
diff --git a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx
index d9e069df341a..88f7d4116155 100644
--- a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx
+++ b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx
@@ -11,6 +11,7 @@ import { DataGridProcessedProps } from '../../models/props/DataGridProps';
import { GridIconButtonContainer } from './GridIconButtonContainer';
export interface GridColumnHeaderSortIconProps {
+ field: string;
direction: GridSortDirection;
index: number | undefined;
sortingOrder: readonly GridSortDirection[];
@@ -51,7 +52,7 @@ function getIcon(
}
function GridColumnHeaderSortIconRaw(props: GridColumnHeaderSortIconProps) {
- const { direction, index, sortingOrder, disabled } = props;
+ const { direction, index, sortingOrder, disabled, ...other } = props;
const apiRef = useGridApiContext();
const rootProps = useGridRootProps();
const ownerState = { ...props, classes: rootProps.classes };
@@ -70,6 +71,7 @@ function GridColumnHeaderSortIconRaw(props: GridColumnHeaderSortIconProps) {
size="small"
disabled={disabled}
{...rootProps.slotProps?.baseIconButton}
+ {...other}
>
{iconElement}
@@ -97,6 +99,7 @@ GridColumnHeaderSortIconRaw.propTypes = {
// ----------------------------------------------------------------------
direction: PropTypes.oneOf(['asc', 'desc']),
disabled: PropTypes.bool,
+ field: PropTypes.string.isRequired,
index: PropTypes.number,
sortingOrder: PropTypes.arrayOf(PropTypes.oneOf(['asc', 'desc'])).isRequired,
} as any;
diff --git a/packages/x-data-grid/src/constants/defaultGridSlotsComponents.ts b/packages/x-data-grid/src/constants/defaultGridSlotsComponents.ts
index f3545cef26f1..e186c665723d 100644
--- a/packages/x-data-grid/src/constants/defaultGridSlotsComponents.ts
+++ b/packages/x-data-grid/src/constants/defaultGridSlotsComponents.ts
@@ -12,6 +12,7 @@ import {
GridColumnHeaderFilterIconButton,
GridRowCount,
GridColumnsManagement,
+ GridColumnHeaderSortIcon,
} from '../components';
import { GridCell } from '../components/cell/GridCell';
import { GridColumnHeaders } from '../components/GridColumnHeaders';
@@ -28,6 +29,7 @@ export const DATA_GRID_DEFAULT_SLOTS_COMPONENTS: GridSlotsComponent = {
cell: GridCell,
skeletonCell: GridSkeletonCell,
columnHeaderFilterIconButton: GridColumnHeaderFilterIconButton,
+ columnHeaderSortIcon: GridColumnHeaderSortIcon,
columnMenu: GridColumnMenu,
columnHeaders: GridColumnHeaders,
detailPanels: GridDetailPanels,
diff --git a/packages/x-data-grid/src/models/gridSlotsComponent.ts b/packages/x-data-grid/src/models/gridSlotsComponent.ts
index f08dc9dde12f..4fe7ea508c74 100644
--- a/packages/x-data-grid/src/models/gridSlotsComponent.ts
+++ b/packages/x-data-grid/src/models/gridSlotsComponent.ts
@@ -93,6 +93,11 @@ export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponen
columnHeaderFilterIconButton: React.JSXElementConstructor<
GridSlotProps['columnHeaderFilterIconButton']
>;
+ /**
+ * Sort icon component rendered in each column header.
+ * @default GridColumnHeaderSortIcon
+ */
+ columnHeaderSortIcon: React.JSXElementConstructor;
/**
* Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.
* @default GridColumnMenu
diff --git a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts
index 6623ae5d4483..20c787042a25 100644
--- a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts
+++ b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts
@@ -27,7 +27,8 @@ import type { GridColumnHeadersProps } from '../components/GridColumnHeaders';
import type { GridDetailPanelsProps } from '../components/GridDetailPanels';
import type { GridPinnedRowsProps } from '../components/GridPinnedRows';
import type { GridColumnsManagementProps } from '../components/columnsManagement/GridColumnsManagement';
-import type { GridRowCountProps } from '../components';
+import type { GridRowCountProps } from '../components/GridRowCount';
+import type { GridColumnHeaderSortIconProps } from '../components/columnHeaders/GridColumnHeaderSortIcon';
// Overrides for module augmentation
export interface BaseCheckboxPropsOverrides {}
@@ -46,6 +47,7 @@ export interface BaseChipPropsOverrides {}
export interface CellPropsOverrides {}
export interface ToolbarPropsOverrides {}
export interface ColumnHeaderFilterIconButtonPropsOverrides {}
+export interface ColumnHeaderSortIconPropsOverrides {}
export interface ColumnMenuPropsOverrides {}
export interface ColumnsPanelPropsOverrides {}
export interface DetailPanelsPropsOverrides {}
@@ -84,6 +86,7 @@ export interface GridSlotProps {
columnHeaders: GridColumnHeadersProps;
columnHeaderFilterIconButton: ColumnHeaderFilterIconButtonProps &
ColumnHeaderFilterIconButtonPropsOverrides;
+ columnHeaderSortIcon: GridColumnHeaderSortIconProps & ColumnHeaderSortIconPropsOverrides;
columnMenu: GridColumnMenuProps & ColumnMenuPropsOverrides;
columnsPanel: GridColumnsPanelProps & ColumnsPanelPropsOverrides;
columnsManagement: GridColumnsManagementProps & ColumnsManagementPropsOverrides;
diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json
index 8958c94d078b..4539e4a0ce6e 100644
--- a/scripts/x-data-grid-premium.exports.json
+++ b/scripts/x-data-grid-premium.exports.json
@@ -16,6 +16,7 @@
{ "name": "checkGridRowIdIsValid", "kind": "Function" },
{ "name": "ColumnHeaderFilterIconButtonProps", "kind": "Interface" },
{ "name": "ColumnHeaderFilterIconButtonPropsOverrides", "kind": "Interface" },
+ { "name": "ColumnHeaderSortIconPropsOverrides", "kind": "Interface" },
{ "name": "ColumnMenuPropsOverrides", "kind": "Interface" },
{ "name": "ColumnsManagementPropsOverrides", "kind": "Interface" },
{ "name": "ColumnsPanelPropsOverrides", "kind": "Interface" },
diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json
index 6a7d1870c023..a0cece9a0a41 100644
--- a/scripts/x-data-grid-pro.exports.json
+++ b/scripts/x-data-grid-pro.exports.json
@@ -16,6 +16,7 @@
{ "name": "checkGridRowIdIsValid", "kind": "Function" },
{ "name": "ColumnHeaderFilterIconButtonProps", "kind": "Interface" },
{ "name": "ColumnHeaderFilterIconButtonPropsOverrides", "kind": "Interface" },
+ { "name": "ColumnHeaderSortIconPropsOverrides", "kind": "Interface" },
{ "name": "ColumnMenuPropsOverrides", "kind": "Interface" },
{ "name": "ColumnsManagementPropsOverrides", "kind": "Interface" },
{ "name": "ColumnsPanelPropsOverrides", "kind": "Interface" },
diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json
index c23d717cd34b..853ded01c41e 100644
--- a/scripts/x-data-grid.exports.json
+++ b/scripts/x-data-grid.exports.json
@@ -16,6 +16,7 @@
{ "name": "checkGridRowIdIsValid", "kind": "Function" },
{ "name": "ColumnHeaderFilterIconButtonProps", "kind": "Interface" },
{ "name": "ColumnHeaderFilterIconButtonPropsOverrides", "kind": "Interface" },
+ { "name": "ColumnHeaderSortIconPropsOverrides", "kind": "Interface" },
{ "name": "ColumnMenuPropsOverrides", "kind": "Interface" },
{ "name": "ColumnsManagementPropsOverrides", "kind": "Interface" },
{ "name": "ColumnsPanelPropsOverrides", "kind": "Interface" },