gregnb / gregnb/mui-datatables
Display filter dialog in header?
- Dominant language
- JavaScript
- Stars
- 2.7k
- Forks
- 906
- PR merge metrics
- No merged PRs in 30d
Description
After extensive research, it looks like there's no way to set the filter dialog to display inline in the header, i.e., not inside a popover. Since filtering is key functionality in many tables, I believe it makes sense to offer an option not to obscure filter controls in a popover.
Is there a way to achieve this without writing custom filter components or moving filtering functionality outside of mui-datatables entirely? Something I'm missing? The mui-datatables filter controls themselves are great and I'd love to be able to use them — but for many of our projects, it's a must-have for filter controls to be visible always rather than hidden.
If there's not, is this an idea the community would support? My team might consider opening a PR for this to chip in if there's interest.
## Expected Behavior
Consider adding a table-level option to control filter control position. Could be something like:
`filterControlPosition:`
`popover` - default - current default (and only) option to display filter controls in popover dialog opened via filter icon in toolbar
`toolbar-inline` - display filter controls inline, either left-aligned in the toolbar or above the toolbar (thoughts here?)
`table-headings` - another possible option to display filters in individual popovers next to each heading cell, much like filtering in Excel
Very interested in the community's thoughts and interest here, in each of the two new proposed options!
## Current Behavior
Currently, there doesn't seem to be a way to use mui-datatables filter controls without keeping them in the filter dialog. To achieve the suggested functionality, you currently must write your own filter control components and add them to a custom toolbar, or move filtering outside of mui-datatables entirely and pass in filtered data.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reviewing the existing filter dialog and custom-toolbar integration described in the issue. Done would mean agreeing on the supported filter-control positions and implementing a table-level option with behavior covering the selected position.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100