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 d680b3db5462..5d72c3f2e9fc 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -1269,6 +1269,12 @@ "description": "Styles applied to the column header if the column has a filter applied to it.", "isGlobal": false }, + { + "key": "columnHeader--last", + "className": "MuiDataGridPremium-columnHeader--last", + "description": "Styles applied to the last column header element.", + "isGlobal": false + }, { "key": "columnHeader--moving", "className": "MuiDataGridPremium-columnHeader--moving", 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 1c430f5a3052..732f9d1513e9 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -1186,6 +1186,12 @@ "description": "Styles applied to the column header if the column has a filter applied to it.", "isGlobal": false }, + { + "key": "columnHeader--last", + "className": "MuiDataGridPro-columnHeader--last", + "description": "Styles applied to the last column header element.", + "isGlobal": false + }, { "key": "columnHeader--moving", "className": "MuiDataGridPro-columnHeader--moving", diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index 4ca488287bf5..4b7fc7836b78 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -1072,6 +1072,12 @@ "description": "Styles applied to the column header if the column has a filter applied to it.", "isGlobal": false }, + { + "key": "columnHeader--last", + "className": "MuiDataGrid-columnHeader--last", + "description": "Styles applied to the last column header element.", + "isGlobal": false + }, { "key": "columnHeader--moving", "className": "MuiDataGrid-columnHeader--moving", 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 f62380f50c38..db2671217fab 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 @@ -802,6 +802,10 @@ "nodeName": "the column header", "conditions": "the column has a filter applied to it" }, + "columnHeader--last": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the last column header element" + }, "columnHeader--moving": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the column header", 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 6898229f45b3..d95a4ffd05e3 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 @@ -740,6 +740,10 @@ "nodeName": "the column header", "conditions": "the column has a filter applied to it" }, + "columnHeader--last": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the last column header element" + }, "columnHeader--moving": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the column header", 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 957595b1a9a8..4f472991918d 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 @@ -629,6 +629,10 @@ "nodeName": "the column header", "conditions": "the column has a filter applied to it" }, + "columnHeader--last": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the last column header element" + }, "columnHeader--moving": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the column header", diff --git a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx index 3141233b9ec7..e11e6b273345 100644 --- a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx +++ b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import clsx from 'clsx'; import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils'; import { fastMemo } from '../../utils/fastMemo'; import { GridStateColDef } from '../../models/colDef/gridColDef'; @@ -9,7 +10,7 @@ import { GridColumnHeaderSortIcon } from './GridColumnHeaderSortIcon'; import { GridColumnHeaderSeparatorProps } from './GridColumnHeaderSeparator'; import { ColumnHeaderMenuIcon } from './ColumnHeaderMenuIcon'; import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu'; -import { getDataGridUtilityClass } from '../../constants/gridClasses'; +import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; import { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem'; @@ -25,6 +26,7 @@ interface GridColumnHeaderItemProps { headerHeight: number; isDragging: boolean; isResizing: boolean; + isLast: boolean; sortDirection: GridSortDirection; sortIndex?: number; filterItemsCounter?: number; @@ -94,6 +96,7 @@ function GridColumnHeaderItem(props: GridColumnHeaderItemProps) { colIndex, headerHeight, isResizing, + isLast, sortDirection, sortIndex, filterItemsCounter, @@ -293,7 +296,7 @@ function GridColumnHeaderItem(props: GridColumnHeaderItemProps) { width={colDef.computedWidth} columnMenuIconButton={columnMenuIconButton} columnTitleIconButtons={columnTitleIconButtons} - headerClassName={headerClassName} + headerClassName={clsx(headerClassName, isLast && gridClasses['columnHeader--last'])} label={label} resizable={!rootProps.disableColumnResize && !!colDef.resizable} data-field={colDef.field} @@ -321,6 +324,7 @@ GridColumnHeaderItem.propTypes = { headerHeight: PropTypes.number.isRequired, indexInSection: PropTypes.number.isRequired, isDragging: PropTypes.bool.isRequired, + isLast: PropTypes.bool.isRequired, isResizing: PropTypes.bool.isRequired, pinnedPosition: PropTypes.oneOf(['left', 'right']), sectionLength: PropTypes.number.isRequired, diff --git a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSeparator.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSeparator.tsx index 92e5504dbedf..ea85556f5675 100644 --- a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSeparator.tsx +++ b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSeparator.tsx @@ -61,7 +61,7 @@ function GridColumnHeaderSeparatorRaw(props: GridColumnHeaderSeparatorProps) { // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
diff --git a/packages/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/x-data-grid/src/components/containers/GridRootStyles.ts index dfd89140efc1..0d5e88de51f6 100644 --- a/packages/x-data-grid/src/components/containers/GridRootStyles.ts +++ b/packages/x-data-grid/src/components/containers/GridRootStyles.ts @@ -279,6 +279,8 @@ export const GridRootStyles = styled('div', { position: 'relative', display: 'flex', alignItems: 'center', + }, + [`& .${c['columnHeader--last']}`]: { overflow: 'hidden', }, [`& .${c['columnHeader--sorted']} .${c.iconButtonContainer}, & .${c['columnHeader--filtered']} .${c.iconButtonContainer}`]: diff --git a/packages/x-data-grid/src/constants/gridClasses.ts b/packages/x-data-grid/src/constants/gridClasses.ts index eec97ecf063b..c795ccda8336 100644 --- a/packages/x-data-grid/src/constants/gridClasses.ts +++ b/packages/x-data-grid/src/constants/gridClasses.ts @@ -117,6 +117,10 @@ export interface GridClasses { * Styles applied to the selection checkbox element. */ checkboxInput: string; + /** + * Styles applied to the column header element. + */ + columnHeader: string; /** * Styles applied to the column header if `headerAlign="center"`. */ @@ -156,9 +160,9 @@ export interface GridClasses { 'columnHeader--pinnedLeft': string; 'columnHeader--pinnedRight': string; /** - * Styles applied to the column header element. + * Styles applied to the last column header element. */ - columnHeader: string; + 'columnHeader--last': string; /** * Styles applied to the header checkbox cell element. */ @@ -635,6 +639,7 @@ export const gridClasses = generateUtilityClasses('MuiDataGrid', [ 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', + 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', @@ -646,7 +651,7 @@ export const gridClasses = generateUtilityClasses('MuiDataGrid', [ 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', - 'columnHeader', + 'columnHeader--last', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', diff --git a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx index e748eb161570..02e089fcd55e 100644 --- a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx +++ b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx @@ -275,6 +275,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { colDef={colDef} colIndex={columnIndex} isResizing={resizeCol === colDef.field} + isLast={columnIndex === columnPositions.length - 1} hasFocus={hasFocus} tabIndex={tabIndex} pinnedPosition={pinnedPosition}