[data grid] Adding Date Range as a Column Header Filter in Data Table Grid

[spencer-rf]

Summary

In the data table grid, under header filters, there's a date picker option, but not a date range. We would like your team to add your date range component as a header filter.

Examples

https://mui.com/x/react-data-grid/filtering/header-filters/
https://mui.com/x/react-date-pickers/date-range-picker/

Motivation

In the MUI data table grid, we want users to have the ability to filter a date column by a date range as a column header filter.

Search keywords: date range, header filter

Search keywords:

[DiegoAndai]

Hey @spencer-rf! I'll transfer this issue to the MUI X repo so the team can take a look.

[michelengelen]

Hey @spencer-rf I'll add the waiting for upvotes label to see if there is enough interest in this from the community.

In the meantime you can add your own headerFilter component to date columns using the column definition. You would probably need to build a custom filtering logic as well, but that shouldn't be too hard.

Here are some resources to get you started:

• renderHeaderFilter docs
• create a custom filter operator

If you need help with that I encourage you to use StackOverflow or join the community on our discord server. 👍🏼