Is it possible to make custom component filter?
See original GitHub issueExpected Behavior
There is 4 filter type in mui-datatables: dropdown, checkbox, textField, and, multiselect. Is it possible to make custom filter component in mui-datatables?
For ex: I want to replace that 4 filter type with my own component(for ex: other library).
And, can i use different filterType on each column? for ex:
column: [
{
name: 'Username',
options: {
filter: false,
sort: false,
filterType: 'textField',
},
},
{
name: 'Date',
options: {
filter: true,
sort: false,
filterType: 'multiselect',
},
},
{
name: 'Age',
options: {
filter: true,
filterType: 'dropdown',
sort: false,
},
}
]
Thank you
Current Behavior
I already tried this: link but it’s not working for me.
Steps to Reproduce (for bugs)
Your Environment
| Tech | Version |
|---|---|
| Material-UI | 3.8.2 |
| MUI-datatables | 2.0.0-beta-53 |
| React | 16.6.0 |
| browser | Chrome |
| etc |
Issue Analytics
- State:
- Created 5 years ago
- Reactions:2
- Comments:11
Top Results From Across the Web
How to Make a Filter Component in React - freeCodeCamp
Filter components are useful on websites because they help users find the results they need quickly and easily.
Read more >Creating a custom filter (pipe) in Angular - Telerik Blogs
Creating a custom filter (pipe) in Angular ... Filters are a fantastic way of returning new collections of data, rather than mutating existing....
Read more >How to create a custom filter box in a react material-table?
You can define your filters in column def. After that make you custom filter component and get props data to get what you...
Read more >Custom Filter React Components for AG Grid's React Data Grid
The default filters provided by AG Grid can be customised both in terms of the GUI and the underlying logic to filter the...
Read more >How to Recreate and Extend AG-Grid Filtering with ... - YouTube
How to Recreate and Extend AG-Grid Filtering with Custom Filter Component · Comments • 3.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

+1, would be great to have date picker as a filter.
It is now possible, as of
2.6.0, to add custom rendering for filters, thanks to @Avd6977!Use
filterOptions: { display: Component }andfilterType: 'custom'in the column options.