From 7417062d3b6516c995b4a91f333d6ea82425fbb8 Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Thu, 20 Jun 2024 13:19:02 +0200 Subject: [PATCH 1/4] Add new component slot for grid header sort icon --- .../x-data-grid/src/constants/defaultGridSlotsComponents.ts | 2 ++ packages/x-data-grid/src/models/gridSlotsComponent.ts | 5 +++++ packages/x-data-grid/src/models/gridSlotsComponentsProps.ts | 5 ++++- 3 files changed, 11 insertions(+), 1 deletion(-) 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; From f3e099a4fd198e00a6e9ae99f02d43ffedd59a9e Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Thu, 20 Jun 2024 13:21:42 +0200 Subject: [PATCH 2/4] Use slot to render header sort icon. Pass field name to allow dynamic customization per column --- .../src/components/columnHeaders/GridColumnHeaderItem.tsx | 5 +++-- .../components/columnHeaders/GridColumnHeaderSortIcon.tsx | 1 + 2 files changed, 4 insertions(+), 2 deletions(-) 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..911b0464951c 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[]; From 5b8615600eaf5eaf9cb65c27a6b56066c5701546 Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Thu, 20 Jun 2024 13:23:02 +0200 Subject: [PATCH 3/4] Pass down all other props that might be added to the custom sort icon component --- .../src/components/columnHeaders/GridColumnHeaderSortIcon.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx index 911b0464951c..536f9f685bbd 100644 --- a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx +++ b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx @@ -52,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 }; @@ -71,6 +71,7 @@ function GridColumnHeaderSortIconRaw(props: GridColumnHeaderSortIconProps) { size="small" disabled={disabled} {...rootProps.slotProps?.baseIconButton} + {...other} > {iconElement} From 254d9bbe8668b3c29706f33a57de76ac99f581db Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Thu, 20 Jun 2024 13:38:00 +0200 Subject: [PATCH 4/4] Update API docs --- docs/pages/x/api/data-grid/data-grid-premium.json | 6 ++++++ docs/pages/x/api/data-grid/data-grid-pro.json | 6 ++++++ docs/pages/x/api/data-grid/data-grid.json | 6 ++++++ .../data-grid/data-grid-premium/data-grid-premium.json | 1 + .../api-docs/data-grid/data-grid-pro/data-grid-pro.json | 1 + .../api-docs/data-grid/data-grid/data-grid.json | 1 + .../components/columnHeaders/GridColumnHeaderSortIcon.tsx | 1 + scripts/x-data-grid-premium.exports.json | 1 + scripts/x-data-grid-pro.exports.json | 1 + scripts/x-data-grid.exports.json | 1 + 10 files changed, 25 insertions(+) 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/GridColumnHeaderSortIcon.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx index 536f9f685bbd..88f7d4116155 100644 --- a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx +++ b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx @@ -99,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/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" },