search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.15k stars 1.3k forks source link

[RFC] Filtering interfaces #3719

Open flaviendelangle opened 2 years ago

flaviendelangle commented 2 years ago

Goal

Depending on why the grid is used, the optimal filtering UI can be very different. The grid should allow the developer to easily switch between filtering UI the filtering UI customization should be a lot easier and well documented.

Other libraries / software filter UIs

If some users have examples of libraries / software filtering UIs which feel better than our own, we are interested.

Interfaces the user are requesting

Filtering input in the header

Right now, the users try to add inputs in the header. I think it would be worth building this feature in the grid to add the input in a row below the header (like on Material Table)

  1. A new grid prop filteringUIMode = "panel" | "header"

  2. A new GridColDef property defaultOperator to decide which operator is used in the header (with a default value for each type)

  3. A new renderHeaderFilterCell to allow heavy customization of this cell ?

Filtering input in the column menu (Handsontable-like)

More powerful filter panel (Excel-like)

Quick filter

Customize the current filter panel

Internal behavior

The filtering process can be split into 3 independent parts:

  1. The filtering engine in useGridFilter: decide when to filter, what, to filter, updates the state, ...

  2. The feature-based filtering logic (eg: the tree data filtering, the row grouping filtering, the flat filtering, ...): decide which rows is matching a filterModel

  3. The Filtering UI

This RFC only discuss the "Filtering UI", not the other two.

With that being said, the filtering engine must support the filterModel format needed for those various filtering UI. For instance, if some UI want s the nested filtering items ((A | B) & C), then the filtering engine must support it.

Therefore, improving the filtering engine will probably be one of the first thing to do before creating a more complex UI.

nemonemi commented 2 years ago

It would be nice to see some progress in this direction.

https://github.com/mui/mui-x/issues/4934

bjornarvh commented 2 years ago

Would love to see a filter row below the header. We use DevExpress XtraGrid for winforms and want to migrate to web. The filter row is very popular with our users, as it has less clicks both to add filters and see current filter.

image