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

[data grid] Improve the filtering panel UX #6419

Open
joserodolfofreitas opened this issue Oct 7, 2022 · 13 comments
Open

[data grid] Improve the filtering panel UX #6419

joserodolfofreitas opened this issue Oct 7, 2022 · 13 comments
Labels
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 enhancement This is not a bug, nor a new feature feature: Filtering Related to the data grid Filtering feature

Comments

@joserodolfofreitas
Copy link
Member

joserodolfofreitas commented Oct 7, 2022

Summary

The current filter panel has a couple of usability problems.

image

Motivation

  • Improved look and feel (UI/UX)
  • To lessen the impact of the panel over the grid, particularly over the filtered column
  • Create more possibilites for customization as we did with the new column menu

Initial Proposals and ideas

  • Replace the X icon with a trashcan (as mentioned at #4929)
  • Have a less wide panel; maybe it makes sense to verticalize the options and avoid displaying the panel over the filtered column.
  • Explore having a draggable panel.
  • Reconsider layout integration with the data grid.
  • Custom column menu #5102

Potential issues we can cover

Challenges

  • Most of the solutions are hard to apply or don't work well with multi-filtering.

Examples

Dev Express

image

Syncfusion'
image

AG Grid

Screen Shot 2022-10-07 at 11 29 03

There are a few problems to consider though, specially on the AG Grid example, you can't always know which column you're filtering, because there's no indication on the panel itself, and assuming based on its position is not reliable,
Is it filtering on country or sport?
image

Telerik doesn't seem to have such a panel and is based on filtering on the header option.

@joserodolfofreitas joserodolfofreitas added component: data grid This is the name of the generic UI component, not the React module! feature: Filtering Related to the data grid Filtering feature design: ux labels Oct 7, 2022
@joserodolfofreitas joserodolfofreitas moved this to 🆕 Needs refinement in MUI X Data Grid Oct 7, 2022
@yaredtsy
Copy link
Contributor

@joserodolfofreitas if the filter panel is verticalized. Would it be long when we use multi-filtering? since the current one works by adding a new filter component below?

image.

AG Grid uses a sidebar for multi-filtering.

image

@joserodolfofreitas
Copy link
Member Author

joserodolfofreitas commented Oct 10, 2022

That's a good point, @yaredtsy. It could get long depending on the number of filters active.
But generally speaking, all the solutions are on the table yet. For instance, we might verticalize the single-column panel, and align each of those panels horizontally in case of multi-filtering (if that presents a better trade-off between the available options).

Do you have a preference on this matter?

@yaredtsy
Copy link
Contributor

I think it would be great if they are collapsable and shows the headerName only
image
. and the active components will expand and they are verticalized.

@yaredtsy
Copy link
Contributor

@joserodolfofreitas I have built a demo. you can check it out at https://codesandbox.io/s/stupefied-breeze-1rvgx0?file=/demo.tsx

@joserodolfofreitas
Copy link
Member Author

joserodolfofreitas commented Oct 15, 2022

Thank you for the example, @yaredtsy!
It does a solid job helping us explore this path.

Before implementing this feature, we'll explore other possibilities as well, most likely with a visual concept/design first.
There's also a discussion on #6247 where we may consider implementing a Query Language for the filter text inputs, which enables users to type yared OR jose, or > 17, for instance.

If we pursue that path, it may also impact how we'll re-design the filter panel.

@joserodolfofreitas
Copy link
Member Author

As a note: perhaps the solution using hooks to empower users to change the layout in the Date Pickers works well here too.

@joserodolfofreitas joserodolfofreitas changed the title [Data Grid] Improved Filter panel [Data Grid] Improved filter panel Jan 17, 2023
@joserodolfofreitas joserodolfofreitas changed the title [Data Grid] Improved filter panel [data grid] Improved filter panel Jan 18, 2023
@cherniavskii
Copy link
Member

Related issue #5183

@chatterz
Copy link

chatterz commented Jan 9, 2024

The mobile behavior of the current filter popper is not yet perfect.

@oliviertassinari oliviertassinari changed the title [data grid] Improved filter panel [data grid] Improved the filter panel UX Oct 21, 2024
@oliviertassinari oliviertassinari changed the title [data grid] Improved the filter panel UX [data grid] Improve the filtering panel UX Oct 21, 2024
@oliviertassinari oliviertassinari added the enhancement This is not a bug, nor a new feature label Oct 21, 2024
@oliviertassinari
Copy link
Member

oliviertassinari commented Oct 21, 2024

We might want to change anchor of the filter panel bested on the trigger. There is quite a long distance for the mouse to travel: https://mui.com/x/react-data-grid/filtering/

Screen.Recording.2024-10-21.at.16.10.17.mov

@jkunwar-sparkgeo
Copy link

In the filter model, the field label uses either the field or the headerName defined in the column definition. Is it possible to specify a custom label for the filter model when headerName is not set for the column? Having a filterLabel property in the column definition would be a great addition.

@oliviertassinari
Copy link
Member

@jkunwar-sparkgeo What's your use case? Did you try to customize the filters manually? https://mui.com/x/react-data-grid/filtering/customization/

@jkunwar-sparkgeo
Copy link

{ field: 'mpConfigured', type: 'boolean', headerName: '', },

@oliviertassinari Since I don't want a column header in the table, I have left headerName blank. However, when I open the filter model, the field label displays as mpConfigured. Instead, I want it to display as Map Configured.
Rather than customizing the entire filter model, having a filterLabel property in the column definition would be a useful feature.

@oliviertassinari
Copy link
Member

oliviertassinari commented Nov 20, 2024

I don't want a column header in the table

@jkunwar-sparkgeo Why not?

Rather than customizing the entire filter model, having a filterLabel property in the column definition would be a useful feature.

For this use case, but if it used 0.01% of the time, it would be harmful on average, in which case we have to default to leaving this to a heavier customizable on developer' side.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
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 enhancement This is not a bug, nor a new feature feature: Filtering Related to the data grid Filtering feature
Projects
Status: 🆕 Needs refinement
Status: Next in queue
Development

No branches or pull requests

7 participants