[DataGrid] Add header filters

[nemonemi]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

I have a use case where I'm integrating a piece of an application suite and we have chosen the MUI's XGrid for our table solution.
The rest of the suite uses AG grid, and since the whole suite should have the same look and feel I am tasked with adjusting the table's header to look and behave like AG grid's one does.

Examples 🌈

Motivation 🔦

What I need is a way to adjust the header so that the filter button is moved out of the header menu and to the place right below the header's cell name.

Also to have a thicker header that contains two rows

Order ID 💳 (optional)

No response

[flaviendelangle]

Hi,

Thanks for your contribution
You can have a look at #3719 which centralizes the various UI for filtering we are considering implementing.

You have issues linked there to implement is manually. But we have to do a clean implementation out of the box 👍

[nemonemi]

Hi @flaviendelangle,
Thanks for the quick response.
I went through the link(s) that you've provided, however, I haven't found anything that I could to make something like this:

A double header where the second row has custom actionable elements, and that they have that line in between and column line separators.

Would you mind being a bit more specific, please?

[flaviendelangle]

You can't create a second header row, you can only make your header row bigger to have two lines in it.
We really need to implement it cleanly to support keyboard navigation out of the box.

[nemonemi]

Any idea as to when we'll get API to make something like this?

[nemonemi]

My team is implementing a part of a product that already uses AG grid, and we will have to make our tables' filters look and behave at least similar to the rest of the platform.

I would really appreciate progress in this direction.

I believe this ticket is similar to this one #3719

[flaviendelangle]

I would be in favor of prioritizing this feature for Q4 because it clearly has a lot of traction

@joserodolfofreitas

[flaviendelangle]

I think #5973 also talks about the same topic

[nemonemi]

Actually, this ticket is about having control of the header so that it can contain 2 (multiple) rows, like in the screenshot from the ticket.

The content of that second row is at the moment not that important, should it be an input field or a button triggering a dropdown would be another topic, I would say.

[nemonemi]

Please don't misunderstand this ticket.
This issue is about having the second row, since that is what the rest of the platform that I am working on already has implemented, so for my use case, this is not a matter for discussion about which other option might be better.

[flaviendelangle]

Basically we have 2 topics:

1. Being able to add a filtering UI in the column header (most grids add a 2nd header row, @israelKusayev proposes an alternative UI, we need to decide how our built-in UI should look like)
2. Being able to add a 2nd header row that user can fill with whatever they want (@nemonemi need)

[nemonemi]

@flaviendelangle,
Are you aware of any timeline existance for this?

[flaviendelangle]

Not that I'm aware off 👍

[nemonemi]

What would be needed to move this feature request forward?

[flaviendelangle]

Time mostly

[nemonemi]

Got it.
We are currently unable to use the filtering feature due to the fact that it looks and behaves differently than the rest of the application.
Any way to raise its priority?

[m4theushw]

@israelKusayev your proposal relays on the placeholder of <input> to display the header name. If a column uses <select> or a custom component we don't have a placeholder to use. I would not consider it as an alternative to close #4934, although you can implement it passing a custom component to renderHeader.

---

The idea of rendering a second row is the best solution but we first need to rework the keyboard navigation to consider this new row and we already have #5879. Instead of this, I played with rendering a "second line" inside the same column headers already displayed. This approach is simpler to implement but needs a change on how the headerHeight prop works.

Despite the decision between second row or double-line column headers, there're other open questions.

1. How to customize the operator used https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Filtering/jQuery/Light/ uses the magnifier icon to open a menu with the options available:

   

   [RFC] Filtering interfaces #3719 proposes a new attribute in the column definition, but it may not be explicit for the user how the filter works.

2. Could this per-column filter also be changed via the filtering panel?

3. Behavior if disableMultipleColumnsFiltering is enabled (e.g. in the community version)? My proposal would be to disable the inputs from the other columns once the input from a column is filled. The user will need to clear the input first to use another filter. We could also make [DataGrid] Add header filters #4934 a Pro-only feature.

[nemonemi]

After 7 months it would be nice to see some progress here.
@oliviertassinari, what would it take to raise the priority of this topic?

[oliviertassinari]

@nemonemi From what I understand, this is a column header cell customization question. I would imagine that it can already be achieved. What blocker did you face?

For the quick filter features itself, we have #6247 and #5973 (same).

[nemonemi]

Thank you for the quick response, @oliviertassinari.
I basically need it to look and behave as the following photo indicates (from the top of the issue)

The desired goal
In the solution that I've built the header needs to have a second row that fits nicely as in the photo (side dividers as in the column name). This row can contain anything but in my case a button that will trigger a showing of a filter that can be customized,
e.g. like in the photos below:

Free search

Dropdown & combinations

Checkbox selection

With date picker

Now, all of these filter types are something that I wouldn't be expecting from the library, but I would appreciate the API or at least guidance on how to achieve this level of customization.

The reason why it has to look and behave like this is because of my team's decision to use the Mui-x instead of the Ag grid solution because of its flexibility, size, integration, etc., however, the rest of the platform uses the Ag grid, and we have to make it look and behave at least similar for the UI/UX cohesion's sake.

I have tried implementing it using the existing API and suggestions from those tickets, but the results were undesirable. For example, the second row, which I've added as a part of the column name, shared the side spacers.

Also, the flexibility of customizing the origin of the filter's dropdown, and their customization is also something that, as of yet, I believe is missing.

[MBilalShafi]

@nemonemi FYI, the filtering on header feature is released, which includes optimizability to add custom cells to the second header row.
I would appreciate you trying it and providing any feedback if you have.
Here's the link to the documentation where you can try it out: https://mui.com/x/react-data-grid/filtering/#header-filters

[nemonemi]

A.mazing!
Thanks for the notification. I'll definitely give it a go, asap :)