[DataGrid] Add columnHeaderSortIcon slot (#13563)

mui · Jun 24, 2024 · 3d1ebd4 · 3d1ebd4
1 parent e372ba7
commit 3d1ebd4
Show file tree

Hide file tree

Showing 14 changed files with 42 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 &quot;kebab&quot; 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
@@ -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 &quot;kebab&quot; 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
@@ -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 &quot;kebab&quot; 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
@@ -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 && (
-        <GridColumnHeaderSortIcon
+        <rootProps.slots.columnHeaderSortIcon
+          field={colDef.field}
           direction={sortDirection}
           index={sortIndex}
           sortingOrder={sortingOrder}
           disabled={!colDef.sortable}
+          {...rootProps.slotProps?.columnHeaderSortIcon}
         />
       )}
     </React.Fragment>

diff --git 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}
     </rootProps.slots.baseIconButton>
@@ -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
@@ -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
@@ -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<GridSlotProps['columnHeaderSortIcon']>;
   /**
    * 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
@@ -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
@@ -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
@@ -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
@@ -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" },