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.

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

[DataGrid] Implement multi-column filter #201

Closed
6 of 8 tasks
oliviertassinari opened this issue Aug 21, 2020 · 39 comments · Fixed by #945
Closed
6 of 8 tasks

[DataGrid] Implement multi-column filter #201

oliviertassinari opened this issue Aug 21, 2020 · 39 comments · Fixed by #945
Assignees
@dtassone
Labels
feature: Filtering Related to the data grid Filtering feature linked in docs The issue is linked in the docs, so completely skew the upvotes new feature New feature or request plan: Pro The feature/fix is on the pro plan
Milestone
Sprint 9

Comments

@oliviertassinari
Copy link
Member

oliviertassinari commented Aug 21, 2020 •
edited

Plan of action

  • 1. Build a column header menu, it will be used for filtering, sorting and any other feature that a column can leverage.

Capture d’écran 2020-11-02 à 11 45 48

  • 2. Build the internal state filtering logic to support one type: string and one operator: contain.
  • 3. Create a global filter UI popup, same as Airtable, Notion, Retool.

Capture d’écran 2020-11-02 à 11 46 14

  • 4. Expose a programmatic public filtering API (3. was for end-users, 4. is for developers).
  • 5. Support all the operations and types possible: date, date range, exclude, etc.
  • 6. Add a toolbar component [DataGrid] Add toolbar #516 (filter popup open, display density, etc.)

Capture d’écran 2020-11-02 à 11 47 07

Capture d’écran 2020-11-02 à 11 48 42

  • 8. Consider supporting inline filter (e.g. react-table demo) but we might not do it.

Capture d’écran 2020-11-02 à 11 47 44

Benchmark

Screenshots Capture d’écran 2020-10-01 à 00 11 07 Capture d’écran 2020-10-01 à 00 10 03 Capture d’écran 2020-10-01 à 00 08 11 Capture d’écran 2020-10-01 à 00 08 36 Capture d’écran 2020-10-01 à 00 06 56 Capture d’écran 2020-10-01 à 00 07 00 Capture d’écran 2020-10-01 à 00 05 20 Capture d’écran 2020-10-01 à 00 05 31 Capture d’écran 2020-10-01 à 00 06 03 Capture d’écran 2020-10-01 à 00 03 39 Capture d’écran 2020-10-01 à 00 01 35 Capture d’écran 2020-09-30 à 23 59 50 Capture d’écran 2020-09-30 à 23 58 38 Capture d’écran 2020-09-30 à 23 57 32 Capture d’écran 2020-09-25 à 22 53 14 Capture d’écran 2020-09-30 à 23 55 21
@oliviertassinari oliviertassinari added component: data grid This is the name of the generic UI component, not the React module! new feature New feature or request labels Aug 21, 2020
@oliviertassinari oliviertassinari added this to Q4 2020 Oct - Dec in MUI X public roadmap Sep 26, 2020
@gsivak22

This comment has been minimized.

Sign in to view
@oliviertassinari oliviertassinari mentioned this issue Sep 30, 2020
Closed
@Darrel-Collinsworth

This comment has been minimized.

Sign in to view
@oliviertassinari
Copy link
Member Author

oliviertassinari commented Oct 13, 2020 •
edited

This issue includes 3 aspects:

  1. the built-in capability to handle filtering in the component.
  2. quick column filter (a simple filter field embedded in the column header).
  3. column filter.

For 3., I would vote for going with Airtable's approach. From my perspective, it's the best one seen so far.

The filtering UX of https://airtable.com/

Capture d’écran 2020-10-13 à 13 30 20

The filtering UX of https://stripe.com/

Capture d’écran 2020-10-13 à 13 29 57

@nextglabs
Copy link

+1 for AirTable UX

@oliviertassinari
Copy link
Member Author

oliviertassinari commented Oct 27, 2020 •
edited

Notion has almost the same UX as Airtable, it works great

Capture d’écran 2020-10-28 à 00 18 14

@bmagnette

This comment has been minimized.

Sign in to view
@dtassone

This comment has been minimized.

Sign in to view
@bmagnette

This comment has been minimized.

Sign in to view
@oliviertassinari oliviertassinari mentioned this issue Oct 30, 2020
Merged
3 tasks
@oliviertassinari
Copy link
Member Author

oliviertassinari commented Nov 2, 2020 •
edited

I have updated the issue's description with a plan of action.

The UX of Retool:

Capture d’écran 2020-11-02 à 11 39 27

@HichemDax

This comment has been minimized.

Sign in to view
@oliviertassinari

This comment has been minimized.

Sign in to view
@HichemDax

This comment has been minimized.

Sign in to view
@ramdaniAli

This comment has been minimized.

Sign in to view
@oliviertassinari oliviertassinari mentioned this issue Nov 18, 2020
Closed
@rejoan121615

This comment has been minimized.

Sign in to view
@oliviertassinari
Copy link
Member Author

This is our latest progress on the feature: https://codesandbox.io/s/material-demo-forked-8tryv?file=/index.js. Any early feedback would be appreciated. You can find the underlying pull request at #411 :D

@angelsvirkov
Copy link

Really looking forward to this. 🚀 . The current demo looks awesome.

Are there any plans to add support for server-side filtering or in other words to expose the selected column filters in a public developer API? I am not sure if that is what you guys mentioned in the issue description with

  1. Expose a programmatic public filtering API (3. was for end-users, 4. is for developers)

@oliviertassinari
Copy link
Member Author

oliviertassinari commented Nov 23, 2020 •
edited

@angelsvirkov I hear two different use cases in your message:

  1. The capability to filter from the server. There are two precedent with the server-side pagination and server-side sorting features.
  2. The capability to listen to the filters applied or even control them from the outside. For instance, it could be used to implement 1. but with some limitations. We plan to allow this. @dtassone has started to work on it in [DataGrid] Prepare work for a future public state api #533, but nothing that can be used yet. Developers using Material-UI should consider that a feature not documented is private and could be removed at any time. In this direction, we will have a onStateChange API.

@paillave
Copy link

Great progress. Here are some comments based on my first impression though (we all know that the first impression counts when it is about ergonomic):

The filter should be much more straight forward. I don't mean showing a horrible textbox/drop down on top of every filterable column. The popup is indeed a good ergonomic compromise to get a grid that is visually as light as possible. According to me, the problem lie in the fact this complex filtering system that is shown by default is not user friendly regarding to the 95% of usage: quickly typing a keyword for the dedicated column to get a result asap. This advanced "intimidating" and click consuming filtering/sorting system should be accessed from somewhere else with a global dedicated button on top of the grid.
When filtered, a column should have an extra icon (or simply by changing the existing vertical triple points icon into another one) shown to know in an eyesight that this column is filtered.

To summarize...

The software who made everybody agree with its ergonomics is Excel. What is needed 95% of times is both very simple and very fast to get. Like this:
image
then click on the of the column you wanna filter:
image

And yet... advanced features are offered, but it's a "gridwide" feature accessible with a different button (a global button some where that shows a different screen such as the one you show for now).
My belief is that you shall focus on what represents 95% (not to say 99%) of usage to start. And then, later on, as an extra feature (why not for the commercial version) implement the advanced feature shown on a different screen.

@HichemDax
Copy link

If you would like to have a powerful Filter feature stick to what @paillave said. I was about to write in the same idea.

@timonbimon
Copy link

FWIW I think the global sorting/filtering UI from Airtable/Notion is definitely the right way to go. Super glad to see you are working on it and cannot wait to integrate it in our current product. :)

@paillave
Copy link

@timonbimon this feature is indeed necessary for the grid to be complete. But still, it is according to me unacceptable to show such a complex screen to make a quick filter. I don't see myself selling such a "quick filtering" feature to my clients who are so used to the quick and straightforward excel filtering system. Once again, make common use cases very simple, and leave advanced ones complex. Making a complex screen to ensure that is covers as well what is needed only 5% of time is a big mistake. End users choose a product based on its productivity. It is ludicrous that users spend 95% of their time doing like they need a advanced filter. And still once again, users (and myself) believe that Excel just made it perfect! I would be a pity to change something that already has the approval of (nearly) the entire planet whereas it took 30 years to Excel to reach this level of ergonomic.

@oliviertassinari
Copy link
Member Author

@paillave For the quick filter, would #202 be more relevant? It's the filter <input> that displays inside the column header.

@HichemDax
Copy link

HichemDax commented Nov 24, 2020 •
edited

@oliviertassinari the quick filter in #202 has a wide scope and the one in Airtable is just complex from beginning and requires much more clicks and thinking.. Excel like filter is the best sitting in the exact middle.

@paillave
Copy link

@dtassone ok, I will.
FYI, I didn't speak about doing checkboxes like in excel. I totally understand that it can have a massive impact of performances if we have to show more than 10000 rows. I just meant that the popup should be related to the column and very simple. The whole Excel behavior with the checkbox list and the amount of occurrences that are related would a fantastic cherry on the cake.

@AleKrabbe
Copy link

The demos look awesome, good work!

Will it be possible to add a locale file to translate those filters? I just purchased a license, would need to translate it to portuguese tho.

Thank you.

@oliviertassinari
Copy link
Member Author

oliviertassinari commented Nov 27, 2020 •
edited

Will it be possible to add a locale file to translate those filters?

@AleKrabbe We plan to solve this problem in #196 during the current sprint. Would the proposed solution cover your use case?

@AleKrabbe
Copy link

AleKrabbe commented Nov 27, 2020 •
edited

Will it be possible to add a locale file to translate those filters?

@AleKrabbe We plan to solve this problem in #196 during the current sprint. Would the proposed solution cover your use case?

Yes, that would solve the problem, thank you.

@oliviertassinari oliviertassinari added the linked in docs The issue is linked in the docs, so completely skew the upvotes label Nov 30, 2020
@paillave paillave mentioned this issue Dec 1, 2020
Open
1 task
@GravityCube

This comment has been minimized.

Sign in to view
@rlmonger

This comment has been minimized.

Sign in to view
@mbrookes mbrookes changed the title [DataGrid] Implement Column filter [DataGrid] Implement multi-column filter Dec 13, 2020
@mbrookes
Copy link
Member

@timonbimon

in the sandbox linked above you currently open the Airtable-like filtering from the dropdown menu of a single column (but you can then filter on all columns), which definitely seems a little awkward and complex.

This adds the specific column from which the filter is opened to the filter list. It's a shortcut of sorts, over the alternative of having a single filter option on the table, and then selecting the column to apply the filter to.

One alternative would be to scope filters selected at the column to that column (how Excel works). The disadvantage of this approach is that with large numbers of columns, it can be difficult to see which columns have filters applied, and these have to be added / cleared one-at-a-time.

The current approach is the best of both, albeit with a UX trade-off caused by the slight cognitive dissonance of a multi-column filter apparently being attached to individual columns.

@mbrookes
Copy link
Member

@dtassone

an autocomplete text field might be easier for a large set of values, and much faster for processing

Here's Excel for Mac, which has a slightly simpler UI than the one in @paillave's screenshot, (note the search box for filtering the values):

image

As you suggest, a multi-select autocomplete with the condition (currently labelled "operator") being "One of" would be perfect.

Incidentally, I just tried it in Excel with a spreadsheet containing ~50K rows, and 32 columns, and displaying the filter was instant, on a 6 year old laptop. (Yes, in memory, with compiled code, but just for reference.)

@timonbimon
Copy link

@timonbimon

in the sandbox linked above you currently open the Airtable-like filtering from the dropdown menu of a single column (but you can then filter on all columns), which definitely seems a little awkward and complex.

This adds the specific column from which the filter is opened to the filter list. It's a shortcut of sorts, over the alternative of having a single filter option on the table, and then selecting the column to apply the filter to.

One alternative would be to scope filters selected at the column to that column (how Excel works). The disadvantage of this approach is that with large numbers of columns, it can be difficult to see which columns have filters applied, and these have to be added / cleared one-at-a-time.

The current approach is the best of both, albeit with a UX trade-off caused by the slight cognitive dissonance of a multi-column filter apparently being attached to individual columns.

Yes, I think once there is a UI element for the entire filter list (independent of the column) then that shortcut makes perfect sense and creates no cognitive dissonance! 🤗

Btw here is the link to a live Airtable example I have looked at multiple times while trying to shape a search/sort/filter-feature in the last weeks (we ended up deciding to wait until you guys release this and then build on top of DataGrid 🙌).

@mbrookes
Copy link
Member

mbrookes commented Dec 13, 2020 •
edited

here is the link to a live Airtable example

Oh, interesting: the name of the column menu option "Add filter" (rather than "Filter"), combined with the presence of the table-level filter icon, makes all the difference.

cc @dtassone

@oliviertassinari oliviertassinari mentioned this issue Dec 21, 2020
Merged
@oliviertassinari oliviertassinari moved this from Q4 2020 Oct - Dec to Q1 2021 Jan - Mar in MUI X public roadmap Dec 25, 2020
@oliviertassinari oliviertassinari modified the milestones: Sprint 8, Sprint 9 Jan 11, 2021
@oliviertassinari oliviertassinari mentioned this issue Jan 29, 2021
Merged
@NaveenKJammula
Copy link

@oliviertassinari is this enhancement released?

@oliviertassinari
Copy link
Member Author

@NaveenKJammula Yes: https://material-ui.com/components/data-grid/sorting/#multi-column-sorting.

@NaveenKJammula
Copy link

@oliviertassinari I see so this is only available in DataGridPro not in DataGrid?

@oliviertassinari oliviertassinari added components: DataGridPro and removed component: data grid This is the name of the generic UI component, not the React module! labels Aug 31, 2021
@oliviertassinari oliviertassinari changed the title [DataGrid] Implement multi-column filter [DataGridPro] Implement multi-column filter Aug 31, 2021
@oliviertassinari oliviertassinari mentioned this issue Jan 24, 2022
Open
2 tasks
@oliviertassinari oliviertassinari added the feature: Filtering Related to the data grid Filtering feature label Jul 28, 2022
@oliviertassinari oliviertassinari added the plan: Pro The feature/fix is on the pro plan label Oct 13, 2023
@oliviertassinari oliviertassinari changed the title [DataGridPro] Implement multi-column filter [DataGrid] Implement multi-column filter Oct 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@dtassone dtassone

Labels
feature: Filtering Related to the data grid Filtering feature linked in docs The issue is linked in the docs, so completely skew the upvotes new feature New feature or request plan: Pro The feature/fix is on the pro plan
Projects
None yet
Milestone
Sprint 9
Development

Successfully merging a pull request may close this issue.

[docs] Improve the docs for the filtering feature dtassone/material-ui-x