[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 d96b3c6

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

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

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

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

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.

Yeah, I think it would make sense to explore it further and unify the keyboard navigation behaviour. Added an issue for future #16206

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.

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

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

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:

I've gone with the plain text label as I think it works better with the existing close button and alongside the outlined inputs in other columns. Will revisit this again when I have more time to look at filter design.

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?

It is, but it's also very similar to the "Simple header filters" section above 😅 Could move both?

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

github-actions · 2025-01-14T23:46:06Z

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

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

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

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

packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts Outdated Show resolved Hide resolved

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 added PR: out-of-date The pull request has merge conflicts and can't be merged and removed PR: out-of-date The pull request has merge conflicts and can't be merged labels Jan 14, 2025

KenanYusuf added 2 commits January 15, 2025 16:46

render label instead of disabled input for no-input filter operators

5f960b1

Merge branch 'master' into header-filter-design

d96b3c6

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

KenanYusuf mentioned this pull request Jan 16, 2025

[data grid] Unify header filter/editable cell keyboard navigation #16206

Open

KenanYusuf merged commit f8510a4 into mui:master Jan 16, 2025
18 checks passed

KenanYusuf deleted the header-filter-design branch January 16, 2025 09:59

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 by cherniavskii

Loading

mui-bot commented Dec 23, 2024 •

edited

Loading

github-actions bot commented Dec 24, 2024

MBilalShafi Dec 25, 2024

MBilalShafi Jan 7, 2025

KenanYusuf Jan 8, 2025 •

edited

Loading

MBilalShafi Jan 13, 2025 •

edited

Loading

KenanYusuf Jan 16, 2025

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

romgrk Jan 13, 2025

KenanYusuf Jan 14, 2025 •

edited

Loading

romgrk Jan 14, 2025 •

edited

Loading

KenanYusuf Jan 16, 2025

MBilalShafi Jan 13, 2025

KenanYusuf Jan 15, 2025

github-actions bot commented Jan 14, 2025

		@@ -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

[DataGrid] Header filter design improvements #15991

Conversation

KenanYusuf commented Dec 23, 2024 • edited by cherniavskii Loading

Changelog

Breaking changes

mui-bot commented Dec 23, 2024 • edited Loading

Localization writing tips ✍️

github-actions bot commented Dec 24, 2024

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

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

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Jan 14, 2025

KenanYusuf commented Dec 23, 2024 •

edited by cherniavskii

Loading

mui-bot commented Dec 23, 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