[RFC] Filtering interfaces

[flaviendelangle]

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.

• AG-Grid: input in the column menu or in a standalone panel
• Material Table: input below the header

Interfaces the user are requesting

Filtering input in the header

• [DataGridPro] can't use TextField in header #3599
• [DataGrid] Select component in DataGrid column header crashes app #3393
• [DataGridPro] <input> in header, conflicts with column reordering & sorting #1915

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)

• [data grid] Excel column filters #3571

More powerful filter panel (Excel-like)

• [data grid] Excel-like filters behavior #670

Quick filter

• [data grid] Implement Quick Filter #2842

Customize the current filter panel

• [DataGrid] Custom filter panel #3384
• [data grid] isAnyOf type filter operator makes filter panel blink and close when extended on two rows #4116

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]

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

#4934

[bjornarvh]

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.