[DataGrid] Header filter design improvements #15991

KenanYusuf · 2024-12-23T16:02:26Z

Closes #15486

https://deploy-preview-15991--material-ui-x.netlify.app/x/react-data-grid/filtering/header-filters/

Changelog

Breaking changes

The clear button in header filter cells has moved to the header filter menu. Use slotProps={{ headerFilterCell: { showClearIcon: true } }} to restore the clear button in the cell.

mui-bot · 2024-12-23T16:06:17Z

Localization writing tips ✍️

Seems you are updating localization 🌍 files.

Thank you for contributing to the localization! 🎉 To make your PR perfect, here is a list of elements to check: ✔️

Verify if the PR title respects the release format. Here are two examples (depending if you update or add a locale file)

[l10n] Improve Swedish (sv-SE) locale
[l10n] Add Danish (da-DK) locale
Update the documentation of supported locales by running pnpm l10n
Clean files with pnpm prettier.

Deploy preview: https://deploy-preview-15991--material-ui-x.netlify.app/

Updated pages:

Generated by 🚫 dangerJS against fb67602

KenanYusuf · 2024-12-23T16:12:50Z

packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx

@@ -113,7 +117,7 @@ const GridHeaderFilterCell = forwardRef<HTMLDivElement, GridHeaderFilterCellProp
    item,
    headerFilterMenuRef,
    InputComponentProps,
-    showClearIcon = true,
+    showClearIcon = false,


📝 Breaking change

Does it make sense to only show one of these two views (clear icon and menu item) at a time? So for example, hide the menu item when showClearIcon is true.

I think so - added a section to the header filters docs with an example. https://deploy-preview-15991--material-ui-x.netlify.app/x/react-data-grid/filtering/header-filters/#inline-clear-button

Great, looks nice. It'd be great to add the BC to migration guide too.

github-actions · 2024-12-24T08:11:14Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

KenanYusuf · 2024-12-24T14:49:48Z

packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts

-    (props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor,
+  const headerFilterHeight = Math.max(
+    Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor),
+    MIN_HEADER_FILTER_HEIGHT,


What do we think about adding a minimum height for the header filter row? We need at minimum enough space for the inputs to not be clipped. Would fix #13048

(there's a broken test related to this, I'll fix if we want to move forward with this approach)

While that seems fine in general, I'm wondering if we could keep the minimum height closer to the compact density height by reducing the font sizes and spacing a bit. I imagine it would be easier now that we have outlined text field. Current compact density view looks a little bit off, isn't it?

Also, this way the users won't be able to customize the height even by using props.headerFilterHeight if the height is lower than min height which doesn't sound great if I want to override the default header filters and pass a custom element.

MBilalShafi · 2024-12-25T08:56:36Z

packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx

It'd be great to keep the keyboard navigation working in the menu.

Current behavior Updated behavior (this PR)

master.mp4

current.mp4

Thanks for fixing it, looks much better.

Another small thing that I noticed is around the singleSelect and boolean fields. When you use Return to enable the editing state on such a column, pressing Return again opens the select options, but even after closing it, the focus keeps on the dropdown and the keyboard navigation doesn't allow to go to next cell (unless Esc is pressed)

keyboard-nav-hf.mp4

How about moving the focus back to the cell when a value is set (second Return is pressed)?

Fair point... I'm thinking we should leave this behavior as it is, given Return is the primary way to interact with a select field via keyboard 🤔

At least this way, users have the option to change the value again with Return, or leave the field with Esc.

At least this way, users have the option to change the value again with Return, or leave the field with Esc.

I understand your point, although it is a trivial thing but just to relate the keyboard navigation for other field types, consider a scenario.

Press Return (edit state activated) -> Update value -> Press Return (edit state deactivated) -> Use navigation keys to focus next cell. (So this user might not be used to pressing Esc during updating multiple filter cells)

The select and boolean would deviate from this pattern and the user might get confused if they can deactivate edit state on some fields with Return + Esc but on some with Esc only. Plus some users might assume the Esc would revert the changes in addition to deactivating the edit state.

(Not necessarily with this PR but) If we dive deep on this, we could settle on a single pattern for all the field types. I'd go with:

Activate edit state: Return

Deactivate edit state: Return

Deactivate edit state and revert changes: Esc

This would also align with the editing behavior.

packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx

github-actions · 2025-01-03T13:16:39Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2025-01-03T23:27:35Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

MBilalShafi

Really nice design update. 👏 Thank you @KenanYusuf for working on it.

Added a few minor comments, apart from them it LGTM.

MBilalShafi · 2025-01-07T11:31:52Z

docs/data/data-grid/filtering/header-filters.md

+
+The clear button is within the header filter menu by default. To display the clear button in the header filter cell instead, set `slotProps.headerFilterCell.showClearIcon` to `true`.
+
+Type in the one of the header filter inputs in the demo below to see the inline clear button.


Nitpick: How about having an initial filter model to demonstrate it instead?

Suggested change

Type in the one of the header filter inputs in the demo below to see the inline clear button.

MBilalShafi · 2025-01-07T11:38:00Z

packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx

@@ -113,7 +117,7 @@ const GridHeaderFilterCell = forwardRef<HTMLDivElement, GridHeaderFilterCellProp
    item,
    headerFilterMenuRef,
    InputComponentProps,
-    showClearIcon = true,
+    showClearIcon = false,


Great, looks nice. It'd be great to add the BC to migration guide too.

MBilalShafi · 2025-01-07T11:46:49Z

packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx

Thanks for fixing it, looks much better.

Another small thing that I noticed is around the singleSelect and boolean fields. When you use Return to enable the editing state on such a column, pressing Return again opens the select options, but even after closing it, the focus keeps on the dropdown and the keyboard navigation doesn't allow to go to next cell (unless Esc is pressed)

keyboard-nav-hf.mp4

How about moving the focus back to the cell when a value is set (second Return is pressed)?

packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx

MBilalShafi · 2025-01-07T14:26:19Z

packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx

An indication (e.g. greying out of input using disabled prop) of non-text filters (like isEmpty) would be great.
Currently we have a dotted line to indicate that.

This PR:

Current (mui.com/x/):

Using an input at all for a filter that doesn't require input isn't good UX imo.

Agree. Before fixing the disabled state, I explored just displaying the active filter label in the field:

I don't think it looks great, but it's probably better than displaying an empty disabled input. What do we think?

Imho it's good enough. Maybe I'd explore displaying it as a badge/chip, maybe with a remove button:

packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx

packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx

MBilalShafi · 2025-01-13T12:05:23Z

docs/data/data-grid/filtering/header-filters.md

@@ -24,6 +24,12 @@ You can disable the default filter panel using `disableColumnFilter` prop and on

 {{"demo": "SimpleHeaderFilteringDataGridPro.js", "bg": "inline", "defaultCodeOpen": false}}

+## Inline clear button


Would this make more sense under Customize header filter section since it's kind-of a customization?

Signed-off-by: Kenan Yusuf <[email protected]>

KenanYusuf added 5 commits December 9, 2024 15:40

change header filter variant and update styling

e6c629e

Merge branch 'master' into header-filter-design

c61dbd1

small inputs

73bcdde

Merge branch 'master' into header-filter-design

0b704af

update clear button design

ebea8b3

KenanYusuf added breaking change component: data grid This is the name of the generic UI component, not the React module! design This is about UI or UX design, please involve a designer v8.x labels Dec 23, 2024

Merge branch 'master' into header-filter-design

7bfafa2

KenanYusuf commented Dec 23, 2024

View reviewed changes

apply styles to header filter class

cebcb87

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 24, 2024

update styles

e9d3fcd

KenanYusuf commented Dec 24, 2024

View reviewed changes

KenanYusuf added 2 commits December 24, 2024 15:31

update demos

c96bdc9

Merge branch 'master' into header-filter-design

b0621f9

KenanYusuf marked this pull request as ready for review December 24, 2024 15:41

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 24, 2024

add test

85c15f6

KenanYusuf requested a review from a team December 24, 2024 16:25

MBilalShafi reviewed Dec 25, 2024

View reviewed changes

packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx Show resolved Hide resolved

KenanYusuf added 2 commits January 2, 2025 09:02

Merge branch 'master' into header-filter-design

6efe0da

fix keyboard navigation

ea0db1d

KenanYusuf mentioned this pull request Jan 2, 2025

[data grid] Add icons to filter operators in header operator menu #16058

Open

KenanYusuf added 2 commits January 2, 2025 15:29

updates

0502511

Merge branch 'master' into header-filter-design

d357d84

KenanYusuf added 2 commits January 2, 2025 15:47

update headerFilterHeight test

0d13012

clarify doc

00e0397

KenanYusuf requested a review from MBilalShafi January 3, 2025 09:47

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 3, 2025

Merge branch 'master' into header-filter-design

5969b6d

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 3, 2025

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 3, 2025

MBilalShafi mentioned this pull request Jan 7, 2025

[data grid] Header filters keyboard navigation issue #16093

Open

MBilalShafi approved these changes Jan 7, 2025

View reviewed changes

KenanYusuf and others added 4 commits January 8, 2025 15:32

update migration guide

248dcfb

show clear button with initial filter model

4f1980e

fix disabled state

760b478

Run script

585e71d

MBilalShafi reviewed Jan 13, 2025

View reviewed changes

MBilalShafi mentioned this pull request Jan 13, 2025

[DataGridPro] Improve compact density UI for header filters #14373

Closed

KenanYusuf force-pushed the header-filter-design branch from b6ca005 to 585e71d Compare January 14, 2025 12:06

Merge branch 'master' into header-filter-design

fb67602

Signed-off-by: Kenan Yusuf <[email protected]>

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 14, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Header filter design improvements #15991

[DataGrid] Header filter design improvements #15991

KenanYusuf commented Dec 23, 2024 •

edited

Loading

mui-bot commented Dec 23, 2024 •

edited

Loading

KenanYusuf Dec 23, 2024

MBilalShafi Dec 25, 2024 •

edited

Loading

KenanYusuf Jan 2, 2025

MBilalShafi Jan 7, 2025

github-actions bot commented Dec 24, 2024

KenanYusuf Dec 24, 2024

KenanYusuf Dec 24, 2024 •

edited

Loading

MBilalShafi Dec 25, 2024 •

edited

Loading

MBilalShafi Dec 25, 2024

MBilalShafi Jan 7, 2025

KenanYusuf Jan 8, 2025 •

edited

Loading

MBilalShafi Jan 13, 2025 •

edited

Loading

github-actions bot commented Jan 3, 2025

github-actions bot commented Jan 3, 2025

MBilalShafi left a comment

MBilalShafi Jan 7, 2025

MBilalShafi Jan 7, 2025

MBilalShafi Jan 7, 2025

MBilalShafi Jan 7, 2025

romgrk Jan 13, 2025

KenanYusuf Jan 14, 2025 •

edited

Loading

romgrk Jan 14, 2025 •

edited

Loading

MBilalShafi Jan 13, 2025


		The clear button is within the header filter menu by default. To display the clear button in the header filter cell instead, set `slotProps.headerFilterCell.showClearIcon` to `true`.

		Type in the one of the header filter inputs in the demo below to see the inline clear button.

		@@ -24,6 +24,12 @@ You can disable the default filter panel using `disableColumnFilter` prop and on

		{{"demo": "SimpleHeaderFilteringDataGridPro.js", "bg": "inline", "defaultCodeOpen": false}}

		## Inline clear button

[DataGrid] Header filter design improvements #15991

Are you sure you want to change the base?

[DataGrid] Header filter design improvements #15991

Conversation

KenanYusuf commented Dec 23, 2024 • edited Loading

Changelog

Breaking changes

mui-bot commented Dec 23, 2024 • edited Loading

Localization writing tips ✍️

Choose a reason for hiding this comment

MBilalShafi Dec 25, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Dec 24, 2024

Choose a reason for hiding this comment

KenanYusuf Dec 24, 2024 • edited Loading

Choose a reason for hiding this comment

MBilalShafi Dec 25, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KenanYusuf Jan 8, 2025 • edited Loading

Choose a reason for hiding this comment

MBilalShafi Jan 13, 2025 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Jan 3, 2025

github-actions bot commented Jan 3, 2025

MBilalShafi left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KenanYusuf Jan 14, 2025 • edited Loading

Choose a reason for hiding this comment

romgrk Jan 14, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KenanYusuf commented Dec 23, 2024 •

edited

Loading

mui-bot commented Dec 23, 2024 •

edited

Loading

MBilalShafi Dec 25, 2024 •

edited

Loading

KenanYusuf Dec 24, 2024 •

edited

Loading

MBilalShafi Dec 25, 2024 •

edited

Loading

KenanYusuf Jan 8, 2025 •

edited

Loading

MBilalShafi Jan 13, 2025 •

edited

Loading

KenanYusuf Jan 14, 2025 •

edited

Loading

romgrk Jan 14, 2025 •

edited

Loading