Mui-datatables: Is it possible to make custom component filter?

[dafapramudya]

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)

1.
2.
3.
4.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 3.8.2 |
| MUI-datatables | 2.0.0-beta-53 |
| React | 16.6.0 |
| browser | Chrome |
| etc | |

[doc82]

Bump +1

[PresentProgrammer]

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

[Stanley-Okwii]

Bump +1

[gabrielliwerant]

Custom filters are coming, and there's a PR open for it now: https://github.com/gregnb/mui-datatables/pull/578

[BingyuLiu]

Bump +1

[jsnavarroc]

it works for me, but I when do build production. it doesn't work before

[gabrielliwerant]

Yes, you can provide a different filter type for each column via filterType on the column options. As of 2.4.0 you can also set custom filter logic via filterOptions: { logic: function }.

[Stanley-Okwii]

@gabrielliwerant , I recently used customRowRender to build custom rows for the table. Despite including the filter option as a checkbox. I noticed that when I use custom rows, I lose the ability to selection given rows.

[gabrielliwerant]

@Stanley-Okwii Your issue doesn't sound like it pertains to custom filters. Can you please up a new issue with specific steps to reproduce your issue so that we may track it separately?

[Stanley-Okwii]

okay. cool

[gabrielliwerant]

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.