diff --git a/docs/data/data-grid/filtering/header-filters.md b/docs/data/data-grid/filtering/header-filters.md index 4022fffdfdd7..fea11f2b5452 100644 --- a/docs/data/data-grid/filtering/header-filters.md +++ b/docs/data/data-grid/filtering/header-filters.md @@ -67,6 +67,15 @@ Additionally, `slots.headerFilterMenu` could also be used to customize the menu {{"demo": "CustomHeaderFilterDataGridPro.js", "bg": "inline", "defaultCodeOpen": false}} +### Custom header filter height + +By default, the height of the header filter row is the same as the header row (represented by `columnHeaderHeight` prop). +You can customize the height of the header filter cell using the `headerFilterHeight` prop. + +```tsx + +``` + ## Ignore diacritics (accents) You can ignore diacritics (accents) when filtering the rows. See [Quick filter - Ignore diacritics (accents)](/x/react-data-grid/filtering/quick-filter/#ignore-diacritics-accents). 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 56215024f027..d680b3db5462 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -163,6 +163,7 @@ } }, "groupingColDef": { "type": { "name": "union", "description": "func
| object" } }, + "headerFilterHeight": { "type": { "name": "number" } }, "headerFilters": { "type": { "name": "bool" }, "default": "false" }, "hideFooter": { "type": { "name": "bool" }, "default": "false" }, "hideFooterPagination": { "type": { "name": "bool" }, "default": "false" }, 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 2de559b31451..1c430f5a3052 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -140,6 +140,7 @@ } }, "groupingColDef": { "type": { "name": "union", "description": "func
| object" } }, + "headerFilterHeight": { "type": { "name": "number" } }, "headerFilters": { "type": { "name": "bool" }, "default": "false" }, "hideFooter": { "type": { "name": "bool" }, "default": "false" }, "hideFooterPagination": { "type": { "name": "bool" }, "default": "false" }, 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 e4650258c745..f62380f50c38 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 @@ -179,6 +179,7 @@ } }, "groupingColDef": { "description": "The grouping column used by the tree data." }, + "headerFilterHeight": { "description": "Override the height of the header filters." }, "headerFilters": { "description": "If true, enables the data grid filtering on header feature." }, 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 44babc11d794..6898229f45b3 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 @@ -160,6 +160,7 @@ } }, "groupingColDef": { "description": "The grouping column used by the tree data." }, + "headerFilterHeight": { "description": "Override the height of the header filters." }, "headerFilters": { "description": "If true, enables the data grid filtering on header feature." }, diff --git a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index 1f3caece0f9a..ed9e568c6f46 100644 --- a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -422,6 +422,10 @@ DataGridPremiumRaw.propTypes = { * The grouping column used by the tree data. */ groupingColDef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + /** + * Override the height of the header filters. + */ + headerFilterHeight: PropTypes.number, /** * If `true`, enables the data grid filtering on header feature. * @default false diff --git a/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts b/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts index ad700ae7eca1..e83cd6834b8b 100644 --- a/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts +++ b/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts @@ -68,7 +68,7 @@ export const useGridCellSelection = ( const autoScrollRAF = React.useRef(); const sortedRowIds = useGridSelector(apiRef, gridSortedRowIdsSelector); const dimensions = useGridSelector(apiRef, gridDimensionsSelector); - const totalHeaderHeight = getTotalHeaderHeight(apiRef, props.columnHeaderHeight); + const totalHeaderHeight = getTotalHeaderHeight(apiRef, props); const ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport; const ignoreValueFormatter = diff --git a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx index 1b9dce1dbcf4..272316b357e7 100644 --- a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -363,6 +363,10 @@ DataGridProRaw.propTypes = { * The grouping column used by the tree data. */ groupingColDef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + /** + * Override the height of the header filters. + */ + headerFilterHeight: PropTypes.number, /** * If `true`, enables the data grid filtering on header feature. * @default false diff --git a/packages/x-data-grid-pro/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/x-data-grid-pro/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx index 9e9a6b446ea3..5465063b1a27 100644 --- a/packages/x-data-grid-pro/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx @@ -127,7 +127,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { extends Omit< - DataGridPropsWithoutDefaultValue, - 'initialState' | 'componentsProps' | 'slotProps' - > { + DataGridPropsWithoutDefaultValue, + 'initialState' | 'componentsProps' | 'slotProps' + >, + DataGridProSharedPropsWithoutDefaultValue { /** * The ref object that allows grid manipulation. Can be instantiated with `useGridApiRef()`. */ diff --git a/packages/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx index 3471efe273e6..dc631df9fe10 100644 --- a/packages/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx @@ -143,6 +143,22 @@ describe(' - Layout', () => { }); }); + it('should work with `headerFilterHeight` prop', () => { + render( +
+ +
, + ); + expect(grid('main')!.clientHeight).to.equal(baselineProps.rows.length * 20 + 20 + 32); + }); + it('should support translations in the theme', () => { render( diff --git a/packages/x-data-grid/src/components/GridRow.tsx b/packages/x-data-grid/src/components/GridRow.tsx index 6157ed735ba3..5e9854587a4e 100644 --- a/packages/x-data-grid/src/components/GridRow.tsx +++ b/packages/x-data-grid/src/components/GridRow.tsx @@ -545,6 +545,7 @@ GridRow.propTypes = { }).isRequired, hasScrollX: PropTypes.bool.isRequired, hasScrollY: PropTypes.bool.isRequired, + headerFilterHeight: PropTypes.number.isRequired, headerHeight: PropTypes.number.isRequired, headersTotalHeight: PropTypes.number.isRequired, isReady: PropTypes.bool.isRequired, diff --git a/packages/x-data-grid/src/components/GridScrollArea.tsx b/packages/x-data-grid/src/components/GridScrollArea.tsx index 8abd78dfb49d..59752fd21305 100644 --- a/packages/x-data-grid/src/components/GridScrollArea.tsx +++ b/packages/x-data-grid/src/components/GridScrollArea.tsx @@ -97,7 +97,7 @@ function GridScrollAreaRaw(props: ScrollAreaProps) { const rootProps = useGridRootProps(); const ownerState = { ...rootProps, scrollDirection }; const classes = useUtilityClasses(ownerState); - const totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps.columnHeaderHeight); + const totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps); const headerHeight = Math.floor(rootProps.columnHeaderHeight * densityFactor); const style: React.CSSProperties = { diff --git a/packages/x-data-grid/src/components/cell/GridCell.tsx b/packages/x-data-grid/src/components/cell/GridCell.tsx index 4c1b45ac20aa..0a84b3eb627e 100644 --- a/packages/x-data-grid/src/components/cell/GridCell.tsx +++ b/packages/x-data-grid/src/components/cell/GridCell.tsx @@ -31,10 +31,7 @@ import { useGridApiContext } from '../../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; import { gridFocusCellSelector } from '../../hooks/features/focus/gridFocusStateSelector'; import { MissingRowIdError } from '../../hooks/features/rows/useGridParamsApi'; -import type { - DataGridProcessedProps, - DataGridProcessedPropsWithShared, -} from '../../models/props/DataGridProps'; +import type { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from '../../utils/cellBorderUtils'; import { GridPinnedColumnPosition } from '../../hooks/features/columns/gridColumnsInterfaces'; @@ -182,7 +179,7 @@ const GridCell = React.forwardRef((props, ref) => } = props; const apiRef = useGridApiContext(); - const rootProps = useGridRootProps() as DataGridProcessedPropsWithShared; + const rootProps = useGridRootProps(); const field = column.field; 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 d3c513e248d6..e748eb161570 100644 --- a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx +++ b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx @@ -74,7 +74,6 @@ export const GridColumnHeaderRow = styled('div', { overridesResolver: (_, styles) => styles.columnHeaderRow, })<{ ownerState: OwnerState }>({ display: 'flex', - height: 'var(--DataGrid-headerHeight)', }); export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { diff --git a/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts b/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts index 7da63d617fef..94ec07bb341a 100644 --- a/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts +++ b/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts @@ -12,6 +12,7 @@ import { GRID_STRING_COL_DEF, getGridDefaultColumnTypes, } from '../../../colDef'; +import { DataGridProcessedProps } from '../../../models/props/DataGridProps'; import { GridApiCommunity } from '../../../models/api/gridApiCommunity'; import { GridColDef, GridStateColDef } from '../../../models/colDef/gridColDef'; import { gridColumnsStateSelector, gridColumnVisibilityModelSelector } from './gridColumnsSelector'; @@ -431,11 +432,16 @@ export function getFirstNonSpannedColumnToRender({ export function getTotalHeaderHeight( apiRef: React.MutableRefObject, - headerHeight: number, + props: Pick, ) { const densityFactor = gridDensityFactorSelector(apiRef); const maxDepth = gridColumnGroupsHeaderMaxDepthSelector(apiRef); const isHeaderFilteringEnabled = gridHeaderFilteringEnabledSelector(apiRef); - const multiplicationFactor = isHeaderFilteringEnabled ? 2 : 1; - return Math.floor(headerHeight * densityFactor) * ((maxDepth ?? 0) + multiplicationFactor); + + const columnHeadersHeight = Math.floor(props.columnHeaderHeight * densityFactor); + const filterHeadersHeight = isHeaderFilteringEnabled + ? Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor) + : 0; + + return columnHeadersHeight * (1 + (maxDepth ?? 0)) + filterHeadersHeight; } diff --git a/packages/x-data-grid/src/hooks/features/dimensions/gridDimensionsApi.ts b/packages/x-data-grid/src/hooks/features/dimensions/gridDimensionsApi.ts index 277b71145688..c7b5bdd3815c 100644 --- a/packages/x-data-grid/src/hooks/features/dimensions/gridDimensionsApi.ts +++ b/packages/x-data-grid/src/hooks/features/dimensions/gridDimensionsApi.ts @@ -59,9 +59,13 @@ export interface GridDimensions { */ rightPinnedWidth: number; /** - * Height of one headers. + * Height of one column header. */ headerHeight: number; + /** + * Height of header filters. + */ + headerFilterHeight: number; /** * Height of all the column headers. */ diff --git a/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts b/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts index 86c21a6195dc..1c3a96e97712 100644 --- a/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts +++ b/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts @@ -42,6 +42,7 @@ type RootProps = Pick< | 'rowHeight' | 'resizeThrottleMs' | 'columnHeaderHeight' + | 'headerFilterHeight' >; export type GridDimensionsState = GridDimensions; @@ -58,6 +59,7 @@ const EMPTY_DIMENSIONS: GridDimensions = { hasScrollY: false, scrollbarSize: 0, headerHeight: 0, + headerFilterHeight: 0, rowWidth: 0, rowHeight: 0, columnsTotalWidth: 0, @@ -89,8 +91,11 @@ export function useGridDimensions( const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector); const rowHeight = Math.floor(props.rowHeight * densityFactor); const headerHeight = Math.floor(props.columnHeaderHeight * densityFactor); + const headerFilterHeight = Math.floor( + (props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor, + ); const columnsTotalWidth = roundToDecimalPlaces(gridColumnsTotalWidthSelector(apiRef), 6); - const headersTotalHeight = getTotalHeaderHeight(apiRef, props.columnHeaderHeight); + const headersTotalHeight = getTotalHeaderHeight(apiRef, props); const leftPinnedWidth = pinnedColumns.left.reduce((w, col) => w + col.computedWidth, 0); const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0); @@ -244,6 +249,7 @@ export function useGridDimensions( hasScrollY, scrollbarSize, headerHeight, + headerFilterHeight, rowWidth, rowHeight, columnsTotalWidth, @@ -273,6 +279,7 @@ export function useGridDimensions( rowsMeta.currentPageTotalHeight, rowHeight, headerHeight, + headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, diff --git a/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx b/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx index 68957d6884cb..909ecae28e8c 100644 --- a/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx +++ b/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx @@ -64,7 +64,7 @@ function buildPrintWindow(title?: string): HTMLIFrameElement { */ export const useGridPrintExport = ( apiRef: React.MutableRefObject, - props: Pick, + props: Pick, ): void => { const logger = useGridLogger(apiRef, 'useGridPrintExport'); const doc = React.useRef(null); @@ -160,7 +160,7 @@ export const useGridPrintExport = ( // Expand container height to accommodate all rows const computedTotalHeight = rowsMeta.currentPageTotalHeight + - getTotalHeaderHeight(apiRef, props.columnHeaderHeight) + + getTotalHeaderHeight(apiRef, props) + gridToolbarElementHeight + gridFooterElementHeight; gridClone.style.height = `${computedTotalHeight}px`; @@ -256,7 +256,7 @@ export const useGridPrintExport = ( }); } }, - [apiRef, doc, props.columnHeaderHeight], + [apiRef, doc, props], ); const handlePrintWindowAfterPrint = React.useCallback( diff --git a/packages/x-data-grid/src/hooks/features/headerFiltering/useGridHeaderFiltering.ts b/packages/x-data-grid/src/hooks/features/headerFiltering/useGridHeaderFiltering.ts index fccdbb154952..dae3a8542487 100644 --- a/packages/x-data-grid/src/hooks/features/headerFiltering/useGridHeaderFiltering.ts +++ b/packages/x-data-grid/src/hooks/features/headerFiltering/useGridHeaderFiltering.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity'; -import { DataGridProcessedPropsWithShared } from '../../../models/props/DataGridProps'; +import { DataGridProcessedProps } from '../../../models/props/DataGridProps'; import { GridHeaderFilteringState } from '../../../models/gridHeaderFilteringModel'; import { useGridApiMethod } from '../../utils/useGridApiMethod'; import { GridStateInitializer } from '../../utils/useGridInitializeState'; @@ -17,7 +17,7 @@ import { export const headerFilteringStateInitializer: GridStateInitializer = ( state, - props: DataGridProcessedPropsWithShared, + props: DataGridProcessedProps, ) => ({ ...state, headerFiltering: { enabled: props.headerFilters ?? false, editing: null, menuOpen: null }, @@ -25,7 +25,7 @@ export const headerFilteringStateInitializer: GridStateInitializer = ( export const useGridHeaderFiltering = ( apiRef: React.MutableRefObject, - props: Pick, + props: Pick, ) => { const logger = useGridLogger(apiRef, 'useGridHeaderFiltering'); const setHeaderFilterState = React.useCallback( diff --git a/packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts b/packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts index 1a2d4d606823..1854e8a134b0 100644 --- a/packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts +++ b/packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts @@ -6,7 +6,7 @@ import { GridCellParams } from '../../../models/params/gridCellParams'; import { gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector'; import { useGridLogger } from '../../utils/useGridLogger'; import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler'; -import { DataGridProcessedPropsWithShared } from '../../../models/props/DataGridProps'; +import { DataGridProcessedProps } from '../../../models/props/DataGridProps'; import { gridExpandedSortedRowEntriesSelector } from '../filter/gridFilterSelector'; import { useGridVisibleRows } from '../../utils/useGridVisibleRows'; import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../colDef/gridCheckboxSelectionColDef'; @@ -92,7 +92,7 @@ const getRightColumnIndex = ({ export const useGridKeyboardNavigation = ( apiRef: React.MutableRefObject, props: Pick< - DataGridProcessedPropsWithShared, + DataGridProcessedProps, | 'pagination' | 'paginationMode' | 'getRowId' diff --git a/packages/x-data-grid/src/internals/index.ts b/packages/x-data-grid/src/internals/index.ts index bee9fac100d2..88b4d71bf80f 100644 --- a/packages/x-data-grid/src/internals/index.ts +++ b/packages/x-data-grid/src/internals/index.ts @@ -129,15 +129,7 @@ export { useGridVisibleRows, getVisibleRows } from '../hooks/utils/useGridVisibl export { useGridInitializeState } from '../hooks/utils/useGridInitializeState'; export type { GridStateInitializer } from '../hooks/utils/useGridInitializeState'; -export type { - DataGridProSharedPropsWithDefaultValue, - DataGridPremiumSharedPropsWithDefaultValue, - GridExperimentalFeatures, - DataGridPropsWithoutDefaultValue, - DataGridPropsWithDefaultValues, - DataGridPropsWithComplexDefaultValueAfterProcessing, - DataGridPropsWithComplexDefaultValueBeforeProcessing, -} from '../models/props/DataGridProps'; +export type * from '../models/props/DataGridProps'; export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils'; export * from '../utils/createControllablePromise'; diff --git a/packages/x-data-grid/src/models/props/DataGridProps.ts b/packages/x-data-grid/src/models/props/DataGridProps.ts index 47619a4c8db1..84f1c3f9456a 100644 --- a/packages/x-data-grid/src/models/props/DataGridProps.ts +++ b/packages/x-data-grid/src/models/props/DataGridProps.ts @@ -53,14 +53,6 @@ export type DataGridProps = Omit< pagination?: true; }; -/** - * The props of the `DataGrid` component after the pre-processing phase. - */ -export interface DataGridProcessedProps - extends DataGridPropsWithDefaultValues, - DataGridPropsWithComplexDefaultValueAfterProcessing, - DataGridPropsWithoutDefaultValue {} - /** * The props of the `DataGrid` component after the pre-processing phase that the user should not be able to override. * Those are usually used in feature-hook for which the pro-plan has more advanced features (eg: multi-sorting, multi-filtering, ...). @@ -799,6 +791,13 @@ export interface DataGridProSharedPropsWithDefaultValue { headerFilters: boolean; } +export interface DataGridProSharedPropsWithoutDefaultValue { + /** + * Override the height of the header filters. + */ + headerFilterHeight?: number; +} + export interface DataGridPremiumSharedPropsWithDefaultValue { /** * If `true`, the cell selection mode is enabled. @@ -808,9 +807,12 @@ export interface DataGridPremiumSharedPropsWithDefaultValue { } /** - * Contains the commercial packages' props shared in the MIT version. + * The props of the `DataGrid` component after the pre-processing phase. */ -export interface DataGridProcessedPropsWithShared - extends DataGridProcessedProps, +export interface DataGridProcessedProps + extends DataGridPropsWithDefaultValues, + DataGridPropsWithComplexDefaultValueAfterProcessing, + DataGridPropsWithoutDefaultValue, + DataGridProSharedPropsWithoutDefaultValue, Partial, Partial {}