[data grid] Filtering on column header

[joserodolfofreitas]

Summary

Enable the possibility of using a filter input on the column's header, either by:

• Adding a second header row to host an (open) filter for columns.
• Replacing the title with an input.

Figma prototype

vDecember-05-2022

Motivation

There are different issues asking for this feature, each requiring something a bit different, which shows the need to leave customization open for this field.

• [DataGrid] Add header filters #4934
• [DataGrid] Header quick filter #5973
• [DataGrid] Select component in DataGrid column header crashes app #3393
• [DataGridPro] <input> in header, conflicts with column reordering & sorting #1915

The basic solution, and most likely the default, involves adding an input (Usually text, but it could be a select, or other inputs that matches column types) on the second header row assuming a “contains” or “equals” cooperation.

Customizations:

• Complex filters
• Custom inputs
• Custom style

Examples

Devexpress

Telerik, and AG Grid use the filter icon to bring advanced options, each in its own way.

guriddojs
http://www.guriddo.net/demo/guriddojs/searching/custom_rule/index.html

[gerdadesign]

Curious about how this would work with multiple filters and adjusting is / is not / > / < etc. Most use cases linked seem to be for simple "contains" filtering.

I'm also wondering if it's something we can add to the header without a second row? If we start from our current hover state on the header and allow the filter icon in the hover state to move to the left and you now edit the filters.
(this interaction is organized from the bottom up, starting at the header row of the grid)

[joserodolfofreitas]

Since we're moving forward without a Query language on a filter input, we need to find an alternative way to support some advanced use cases, at least those that depend on a different comparator (not contains or equals).

@gerdadesign, can we have a concept with a UI control to change the comparator?

Another point: The filtering on header won't support multiple conditions, but it must still somehow reflect if a user set multiple conditions in the filter panel.

[mauro-ni]

Would the header with the filters and the panel with the filters be available at the same time or is it up to the developer to choose between one of the two possibilities?

In case both can be activated then one possibility would be to limit to logic AND and one filter per column in the filter panel.

Mauro

[joserodolfofreitas]

Thanks for the feedback, @mauro-ni.
We may add an opt-out option for disabling the Filter Panel, but the idea of having both filtering UIs enabled is meant as a way to provide/complement advanced filtering options, which may not be possible with the simplified UI on the header.

[mauro-ni]

@joserodolfofreitas Thanks for the reply. I understand that it may not be possible to provide both a simplified user interface in the header and filter panel. An idea could be to show only one filter per column in the simplified user interface in the header and possibly signal with an icon (or a icon button) the presence of other filters, accessible through the filter panel.
What do you think?

[oliviertassinari]

Reading through this issue. I feel that it's going after the same problem than #5973. I first saw this request when Damien implemented the rich filtering feature, and people asked the same thing:

Coming from jQuery I noticed how much the end user likes the direct filtering from header columns (no modals to open, less clicks)

Effectivement, it's about allowing designers and PMs to implement different filtering UX tradeoffs. So I think it's all about optimizing for the simpler search use cases (AND contain match for each column), compared the filter panel.

People seem like this tradeoff:

• [DataGrid] Add header filters #4934 (comment)
• [DataGrid] Add header filters #4934 (comment)
• [DataGrid] Add header filters #4934 (comment)

[oliviertassinari]

If we ever want to push column header filtering far:

Screen.Recording.2023-09-14.at.17.42.04.mov

https://observablehq.com/@fil/insee-parquet