From 3d1ebd4e116e1b0b6499a9011e7bd1fed06e4a42 Mon Sep 17 00:00:00 2001 From: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com> Date: Mon, 24 Jun 2024 09:13:46 +0200 Subject: [PATCH] [DataGrid] Add `columnHeaderSortIcon` slot (#13563) --- 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 + .../src/components/columnHeaders/GridColumnHeaderItem.tsx | 5 +++-- .../components/columnHeaders/GridColumnHeaderSortIcon.tsx | 5 ++++- .../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 ++++- scripts/x-data-grid-premium.exports.json | 1 + scripts/x-data-grid-pro.exports.json | 1 + scripts/x-data-grid.exports.json | 1 + 14 files changed, 42 insertions(+), 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 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" },