[DataGridPro] Filtering on Column Header #7760

MBilalShafi · 2023-01-30T08:55:10Z

Nice to Haves (recommendations will be appreciated):

Reexport from /internals (avoid eslint comment)
Move headerFiltering state, keyboard navigation, useColumnResize, and focus logic to the Pro package (too tightly coupled, maybe leave it for another PR?)

Issue: #6247
Designs: https://www.figma.com/proto/W6TItYkiGJZjL5zLnfeSjy/Data-grid?node-id=1024%3A44648&scaling=scale-down-width&page-id=650%3A35241&starting-point-node-id=905%3A40731

Preview

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

Changelog

🎁 Introduce filtering on header feature for DataGridPro:

Screen.Recording.2023-05-18.at.6.35.47.PM.mov

Screen.Recording.2023-05-18.at.7.32.29.PM.mov

See the documentation for more details.

mui-bot · 2023-01-30T09:00:35Z

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 yarn l10n
Clean files with yarn prettier.

Netlify deploy preview

Netlify deploy preview: https://deploy-preview-7760--material-ui-x.netlify.app/

Updated pages

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	610.2	1,068.3	616.9	766.9	167.134
Sort 100k rows	ms	633.4	1,000.6	753.4	848.9	135.477
Select 100k rows	ms	142.8	328.9	207.5	225.16	67.534
Deselect 100k rows	ms	168.7	307.2	205.5	231.2	50.537

Generated by 🚫 dangerJS against 3e2d5f5

github-actions · 2023-02-10T22:31:03Z

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

github-actions · 2023-02-27T22:51:51Z

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

github-actions · 2023-05-16T10:39:09Z

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

DanailH · 2023-05-18T10:38:01Z

@MBilalShafi I checked it one more time - looks solid, and nicely done.
There were a couple of things that were pointed out that can be addressed later - probably the most annoying one is the small jump when you focus and unfocus a header filter cell. I propose we create an issue and list all those things so we don't lose track of them.
Besides that, I'm ok with releasing the first version to see what the feedback will be (should be safe as it's marked as unstable).

cherniavskii

Great work, @MBilalShafi! 🎉

MBilalShafi · 2023-05-18T13:12:49Z

Thanks everyone who contributed for the great review feedback to shape this PR up 🙏

oliviertassinari · 2023-05-20T00:46:07Z

The primary rationale for blurring the input field on Enter is to make keyboard navigation work as expected

@MBilalShafi From the perspective of an end-user, I think that this is an input inside an header. The notion of header cell sounds more like an implementation detail. As an end user, I would span Enter to make my filter query is executed. A blur would suspire me (how I found this).

oliviertassinari · 2023-05-20T00:50:32Z

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

+            onFocus={() => apiRef.current.startHeaderFilterEditMode(colDef.field)}
+            onBlur={() => apiRef.current.stopHeaderFilterEditMode()}
+            placeholder={apiRef.current.getLocaleText('columnMenuFilter')}
+            label={isFilterActive ? capitalize(label) : ' '}


I think that we should change this logic, turning the label to an empty string breaks the floating label animation. Instead, it's better to control the shrink state.

Agreed, one reason it happens is that label also changes on focus (e.g Filter -> Contains), added to the list of follow-up items.

Initial POC

ad0ba0d

MBilalShafi added component: data grid This is the name of the generic UI component, not the React module! new feature New feature or request v6.x feature: Filtering Related to the data grid Filtering feature design: ux labels Jan 30, 2023

MBilalShafi changed the title ~~[DataGrid] Filtering on Column Header~~ [DataGridPro] Filtering on Column Header Feb 9, 2023

MBilalShafi added the plan: Pro Impact at least one Pro user label Feb 9, 2023

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

Merge branch 'next' into filtering-on-header

820becf

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

temp commit

5b4f314

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

Merge 'master' into filtering-on-header

d2d4ecc

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

MBilalShafi added 11 commits March 16, 2023 21:08

Move some logic to DataGridPro

1f4b66b

Add focus, keyboard nav, options for filter and some refinement

9aa10ca

Make headerFiltering experimental

d9ae503

Add demo

58e8124

Fix keyboard navigation for community version

9ea25c1

API, state, and refinement

f96dc1f

Merge branch 'master' into filtering-on-header

809d009

Add events for filter cell and other fixes

902f06e

Fix weird focus management issue and add forwardRef

536b6f2

Enable everywhere for testing

f3ea7f6

Move some logic to hook and remove extra component

aa6e684

MBilalShafi added 3 commits May 16, 2023 15:34

Address review comments

fd22644

Support string literals in locales and generate locales

4908694

Housekeeping

d7ad5ba

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

Merge branch 'master' into filtering-on-header

3e2d5f5

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

MBilalShafi requested review from romgrk, DanailH and cherniavskii May 17, 2023 10:10

cherniavskii reviewed May 18, 2023

View reviewed changes

cherniavskii approved these changes May 18, 2023

View reviewed changes

MBilalShafi mentioned this pull request May 18, 2023

[DataGridPro] Filtering on the Header followup actions #9034

Open

8 tasks

DanailH approved these changes May 18, 2023

View reviewed changes

MBilalShafi merged commit bb3a96c into mui:master May 18, 2023

This was referenced May 18, 2023

v6.5.0 #9036

Merged

[core] Allow string literals as keys in localesText #9045

Merged

gerdadesign mentioned this pull request May 19, 2023

[DataGridPro] Filtering on Header — improve icons #9049

Closed

2 tasks

oliviertassinari reviewed May 20, 2023

View reviewed changes

cherniavskii mentioned this pull request Jun 6, 2023

[data grid] Support inAnyOf operator in header filters #9243

Open

1 task

cherniavskii mentioned this pull request Jun 27, 2023

[DataGridPro] Fix column headers alignment #9502

Closed

1 task

oliviertassinari added design This is about UI or UX design, please involve a designer and removed design: ux labels Aug 18, 2023

MBilalShafi mentioned this pull request Jan 24, 2024

[l10n] Improve Hebrew (he-IL) locale #11788

Merged

1 task

MBilalShafi added the feature: Filtering on header Related to the header filtering (Pro) feature label Aug 1, 2024

MBilalShafi mentioned this pull request Aug 2, 2024

[DataGridPro] Fix custom header filter keyboard control when triggered via space key #14067

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGridPro] Filtering on Column Header #7760

[DataGridPro] Filtering on Column Header #7760

MBilalShafi commented Jan 30, 2023 •

edited

Loading

mui-bot commented Jan 30, 2023 •

edited

Loading

github-actions bot commented Feb 10, 2023

github-actions bot commented Feb 27, 2023

github-actions bot commented May 16, 2023

DanailH commented May 18, 2023

cherniavskii left a comment

MBilalShafi commented May 18, 2023

oliviertassinari commented May 20, 2023 •

edited

Loading

oliviertassinari May 20, 2023 •

edited

Loading

MBilalShafi May 22, 2023 •

edited

Loading

[DataGridPro] Filtering on Column Header #7760

[DataGridPro] Filtering on Column Header #7760

Conversation

MBilalShafi commented Jan 30, 2023 • edited Loading

Preview

Changelog

mui-bot commented Jan 30, 2023 • edited Loading

Localization writing tips ✍️

Netlify deploy preview

Updated pages

github-actions bot commented Feb 10, 2023

github-actions bot commented Feb 27, 2023

github-actions bot commented May 16, 2023

DanailH commented May 18, 2023

cherniavskii left a comment

Choose a reason for hiding this comment

MBilalShafi commented May 18, 2023

oliviertassinari commented May 20, 2023 • edited Loading

oliviertassinari May 20, 2023 • edited Loading

Choose a reason for hiding this comment

MBilalShafi May 22, 2023 • edited Loading

Choose a reason for hiding this comment

MBilalShafi commented Jan 30, 2023 •

edited

Loading

mui-bot commented Jan 30, 2023 •

edited

Loading

oliviertassinari commented May 20, 2023 •

edited

Loading

oliviertassinari May 20, 2023 •

edited

Loading

MBilalShafi May 22, 2023 •

edited

Loading