Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DataGridPro] Implement header filter height #12666

Merged
merged 9 commits into from
Apr 16, 2024
Merged

[DataGridPro] Implement header filter height #12666

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
95ccde6
feat: implement header filter height
romgrk Apr 3, 2024
9738005
refactor
romgrk Apr 4, 2024
151af8f
Merge branch 'master' into feat-grid-header-filter-height
MBilalShafi Apr 4, 2024
bbecf61
lint
romgrk Apr 4, 2024
4fb850c
Merge branch 'master' into feat-grid-header-filter-height
romgrk Apr 4, 2024
42367c6
doc: update
romgrk Apr 5, 2024
1dfac67
Update packages/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx
romgrk Apr 5, 2024
423b793
doc: update
romgrk Apr 11, 2024
3ae572d
refactor: remove shared props export
romgrk Apr 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/pages/x/api/data-grid/data-grid-premium.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@
"type": { "name": "shape", "description": "{ warnIfFocusStateIsNotSynced?: bool }" }
},
"filterDebounceMs": { "type": { "name": "number" }, "default": "150" },
"filterHeaderHeight": { "type": { "name": "number" } },
"filterMode": {
"type": { "name": "enum", "description": "'client'<br>&#124;&nbsp;'server'" },
"default": "\"client\""
Expand Down
1 change: 1 addition & 0 deletions docs/pages/x/api/data-grid/data-grid-pro.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@
"type": { "name": "shape", "description": "{ warnIfFocusStateIsNotSynced?: bool }" }
},
"filterDebounceMs": { "type": { "name": "number" }, "default": "150" },
"filterHeaderHeight": { "type": { "name": "number" } },
"filterMode": {
"type": { "name": "enum", "description": "'client'<br>&#124;&nbsp;'server'" },
"default": "\"client\""
Expand Down
1 change: 1 addition & 0 deletions docs/pages/x/api/data-grid/data-grid.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
"type": { "name": "shape", "description": "{ warnIfFocusStateIsNotSynced?: bool }" }
},
"filterDebounceMs": { "type": { "name": "number" }, "default": "150" },
"filterHeaderHeight": { "type": { "name": "number" } },
"filterMode": {
"type": { "name": "enum", "description": "'client'<br>&#124;&nbsp;'server'" },
"default": "\"client\""
Expand Down
1 change: 1 addition & 0 deletions docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@
"filterDebounceMs": {
"description": "The milliseconds delay to wait after a keystroke before triggering filtering."
},
"filterHeaderHeight": { "description": "Override the height/width of the header filters." },
"filterMode": {
"description": "Filtering can be processed on the server or client-side. Set it to &#39;server&#39; if you would like to handle filtering on the server-side."
},
Expand Down
1 change: 1 addition & 0 deletions docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@
"filterDebounceMs": {
"description": "The milliseconds delay to wait after a keystroke before triggering filtering."
},
"filterHeaderHeight": { "description": "Override the height/width of the header filters." },
"filterMode": {
"description": "Filtering can be processed on the server or client-side. Set it to &#39;server&#39; if you would like to handle filtering on the server-side."
},
Expand Down
1 change: 1 addition & 0 deletions docs/translations/api-docs/data-grid/data-grid/data-grid.json
View file
Open in desktop
romgrk marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@
"filterDebounceMs": {
"description": "The milliseconds delay to wait after a keystroke before triggering filtering."
},
"filterHeaderHeight": { "description": "Override the height/width of the header filters." },
"filterMode": {
"description": "Filtering can be processed on the server or client-side. Set it to &#39;server&#39; if you would like to handle filtering on the server-side."
},
Expand Down
4 changes: 4 additions & 0 deletions packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -325,6 +325,10 @@ DataGridPremiumRaw.propTypes = {
* @default 150
*/
filterDebounceMs: PropTypes.number,
/**
* Override the height/width of the header filters.
*/
filterHeaderHeight: PropTypes.number,
/**
* Filtering can be processed on the server or client-side.
* Set it to 'server' if you would like to handle filtering on the server-side.
Expand Down
2 changes: 1 addition & 1 deletion packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export const useGridCellSelection = (
const autoScrollRAF = React.useRef<number | null>();
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 =
Expand Down
4 changes: 4 additions & 0 deletions packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -273,6 +273,10 @@ DataGridProRaw.propTypes = {
* @default 150
*/
filterDebounceMs: PropTypes.number,
/**
* Override the height/width of the header filters.
*/
filterHeaderHeight: PropTypes.number,
/**
* Filtering can be processed on the server or client-side.
* Set it to 'server' if you would like to handle filtering on the server-side.
Expand Down
2 changes: 1 addition & 1 deletion packages/x-data-grid-pro/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
<rootProps.slots.headerFilterCell
colIndex={columnIndex}
key={`${colDef.field}-filter`}
height={dimensions.headerHeight}
height={dimensions.filterHeaderHeight}
width={colDef.computedWidth}
colDef={colDef}
hasFocus={hasFocus}
Expand Down
16 changes: 16 additions & 0 deletions packages/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,22 @@ describe('<DataGridPro /> - Layout', () => {
});
});

it('should work with filterHeaderHeight', () => {
render(
<div style={{ width: 300, height: 300 }}>
<DataGridPro
{...baselineProps}
autoHeight
headerFilters
columnHeaderHeight={20}
filterHeaderHeight={32}
rowHeight={20}
/>
</div>,
);
expect(grid('main')!.clientHeight).to.equal(baselineProps.rows.length * 20 + 20 + 32);
});

it('should support translations in the theme', () => {
render(
<ThemeProvider theme={createTheme({}, ptBR)}>
Expand Down
4 changes: 4 additions & 0 deletions packages/x-data-grid/src/DataGrid/DataGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,10 @@ DataGridRaw.propTypes = {
* @default 150
*/
filterDebounceMs: PropTypes.number,
/**
* Override the height/width of the header filters.
*/
filterHeaderHeight: PropTypes.number,
/**
* Filtering can be processed on the server or client-side.
* Set it to 'server' if you would like to handle filtering on the server-side.
Expand Down
1 change: 1 addition & 0 deletions packages/x-data-grid/src/components/GridRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -541,6 +541,7 @@ GridRow.propTypes = {
height: PropTypes.number.isRequired,
width: PropTypes.number.isRequired,
}).isRequired,
filterHeaderHeight: PropTypes.number.isRequired,
hasScrollX: PropTypes.bool.isRequired,
hasScrollY: PropTypes.bool.isRequired,
headerHeight: PropTypes.number.isRequired,
Expand Down
2 changes: 1 addition & 1 deletion packages/x-data-grid/src/components/GridScrollArea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
1 change: 0 additions & 1 deletion packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,6 @@ export const GridColumnHeaderRow = styled('div', {
overridesResolver: (_, styles) => styles.columnHeaderRow,
})<{ ownerState: OwnerState }>({
display: 'flex',
height: 'var(--DataGrid-headerHeight)',
});

export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
Expand Down
12 changes: 9 additions & 3 deletions packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -431,11 +432,16 @@ export function getFirstNonSpannedColumnToRender({

export function getTotalHeaderHeight(
apiRef: React.MutableRefObject<GridApiCommunity>,
headerHeight: number,
props: Pick<DataGridProcessedProps, 'columnHeaderHeight' | 'filterHeaderHeight'>,
) {
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.filterHeaderHeight ?? props.columnHeaderHeight) * densityFactor)
: 0;

return columnHeadersHeight * (1 + (maxDepth ?? 0)) + filterHeadersHeight;
}
6 changes: 5 additions & 1 deletion packages/x-data-grid/src/hooks/features/dimensions/gridDimensionsApi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,13 @@ export interface GridDimensions {
*/
rightPinnedWidth: number;
/**
* Height of one headers.
* Height of one column header.
*/
headerHeight: number;
/**
* Height of header filters.
*/
filterHeaderHeight: number;
/**
* Height of all the column headers.
*/
Expand Down
9 changes: 8 additions & 1 deletion packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ type RootProps = Pick<
| 'rowHeight'
| 'resizeThrottleMs'
| 'columnHeaderHeight'
| 'filterHeaderHeight'
>;

export type GridDimensionsState = GridDimensions;
Expand All @@ -58,6 +59,7 @@ const EMPTY_DIMENSIONS: GridDimensions = {
hasScrollY: false,
scrollbarSize: 0,
headerHeight: 0,
filterHeaderHeight: 0,
rowWidth: 0,
rowHeight: 0,
columnsTotalWidth: 0,
Expand Down Expand Up @@ -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 filterHeaderHeight = Math.floor(
(props.filterHeaderHeight ?? 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);
Expand Down Expand Up @@ -244,6 +249,7 @@ export function useGridDimensions(
hasScrollY,
scrollbarSize,
headerHeight,
filterHeaderHeight,
rowWidth,
rowHeight,
columnsTotalWidth,
Expand Down Expand Up @@ -273,6 +279,7 @@ export function useGridDimensions(
rowsMeta.currentPageTotalHeight,
rowHeight,
headerHeight,
filterHeaderHeight,
columnsTotalWidth,
headersTotalHeight,
leftPinnedWidth,
Expand Down
6 changes: 3 additions & 3 deletions packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ function buildPrintWindow(title?: string): HTMLIFrameElement {
*/
export const useGridPrintExport = (
apiRef: React.MutableRefObject<GridPrivateApiCommunity>,
props: Pick<DataGridProcessedProps, 'pagination' | 'columnHeaderHeight'>,
props: Pick<DataGridProcessedProps, 'pagination' | 'columnHeaderHeight' | 'filterHeaderHeight'>,
): void => {
const logger = useGridLogger(apiRef, 'useGridPrintExport');
const doc = React.useRef<Document | null>(null);
Expand Down Expand Up @@ -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`;
Expand Down Expand Up @@ -256,7 +256,7 @@ export const useGridPrintExport = (
});
}
},
[apiRef, doc, props.columnHeaderHeight],
[apiRef, doc, props],
);

const handlePrintWindowAfterPrint = React.useCallback(
Expand Down
4 changes: 4 additions & 0 deletions packages/x-data-grid/src/models/props/DataGridProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -417,6 +417,10 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
* Override the height/width of the Data Grid inner scrollbar.
*/
scrollbarSize?: number;
/**
* Override the height/width of the header filters.
romgrk marked this conversation as resolved.
Show resolved Hide resolved
*/
filterHeaderHeight?: number;
romgrk marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, shouldn't this prop belong to dataGridProProps.ts like headerFilters boolean flag?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I need it in community for the dimensions logic.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alright, bdw, I just merged #12365
Maybe headerFilterHeight could be placed in DataGridProcessedPropsWithShared just like the headerFilters boolean.
That way we won't be exposing it to MIT users yet make it accessible in the @mui/x-data-grid scope.
Wdyt?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What was the reason for splitting DataGridProcessedProps and DataGridProcessedPropsWithShared? Having some trouble fixing the types because DataGridProcessedProps is used in many places where DataGridProcessedPropsWithShared should be used. AFAIK, DataGridProcessedProps is not used by external users so we should be able to place final typings there.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What was the reason for splitting DataGridProcessedProps and DataGridProcessedPropsWithShared?

The main reason for keeping a line between DataGridProcessedProps and DataGridProcessedPropsWithShared in my mind was to reflect a better understanding of the specific scenario.

For example hook A and B.

A uses some shared props from higher packages, it could be easily guessed by the reader of the code by the import name DataGridProcessedPropsWithShared

export const useA = (
  apiRef: React.MutableRefObject<GridPrivateApiCommunity>,
  props: Pick<
    DataGridProcessedPropsWithShared,
    | 'regularProp'
    | 'sharedProp'
  >,
): void => {

Wheras B doesn't use a shared prop.

export const useB = (
  apiRef: React.MutableRefObject<GridPrivateApiCommunity>,
  props: Pick<DataGridProcessedProps, 'regularProp' | 'regularProp2'>,
): void => {

It's obvious just by looking at the first few lines of the file which hook uses shared props and which don't. It might be helpful on the understanding side for new maintainers.

But I agree that making them part of DataGridProcessedProps along with wrapping them in Partial<> may also do the job + simplify the maintaining the types. I do not have a hard preference on either of them. Feel free to go with the suggested refactoring.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did the refactor. Feels better this way because the typings reflect what's really present.

/**
* Function that applies CSS classes dynamically on cells.
* @param {GridCellParams} params With all properties from [[GridCellParams]].
Expand Down