question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Is it possible to make custom component filter?

See original GitHub issue

Expected 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:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:11

github_iconTop GitHub Comments

6reactions
PresentProgrammercommented, May 23, 2019

+1, would be great to have date picker as a filter.

1reaction
gabrielliwerantcommented, Jul 2, 2019

It is now possible, as of 2.6.0, to add custom rendering for filters, thanks to @Avd6977!

Use filterOptions: { display: Component } and filterType: 'custom' in the column options.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found