[DataGrid] Add columnHeaderSortIcon slot (mui#13563)

thomasmoon · Sep 6, 2024 · c3ef3fd · c3ef3fd
1 parent d480a0d
commit c3ef3fd
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" },