Mui-datatables: Feature Request: Custom filter list

[jmarucha]

For the data provided from external source, such as database, providing custom list of avialable filters would be extremaly useful.

Current Behavior

The filter options are based on the data passed to the component. For the data:

[1, 'a']
[2, 'b']
[3, 'a']

avialable filters on column 2 are 'a' and 'b'

Expected Behavior

A user should be able to provide list of filters to override the possible filter options via custom column field. Passing

columns = [
 {
     name: "ID",
     options: {
       filter: false,
       sort: true,
  }
  {
    name: "value",
    options: {
      filter: true,
      filterOptions: [
        'a', 'b', 'c', 'd'
      ]
    }
  }
];

As columns option should make filtering by 'a', 'b', 'c', 'd' on column 'value' avialable regardless of options.

[gregnb]

Sorry, misunderstood a provided filterList for filterOptions. Ok, I'll get back to you on this.

[gregnb]

As it stands today there is a filterList option available to provided server side data on already selected filter values. This would be a nice pairing and I'm thinking about making a breaking change to remove it from the options and folder it under the column options and it would result in something like this:

columns = [
 {
     name: "ID",
     options: {
       filter: false,
       sort: true,
  }
  {
    name: "value",
    options: {
      filter: true,
      filterList: [
         'a', 'b'
      ],
      filterOptions: [
        'a', 'b', 'c', 'd'
      ]
    }
  }
];

versus what is there today:

    const options = {
      filter: true,
      selectableRows: true,
      filterType: 'dropdown',
      responsive: 'stacked',
      rowsPerPage: 10,
      page: 1,
      rowsSelected: [2, 5],
      filterList: [
        ["a"],
        [],
        [],
        [],
        []
      ]
    };

[toolaugh]

I have the same problems like @jmarucha . I want to custom filter list menu options . and wonder how to custom ?

[toolaugh]

I also want to custom styles of filter view like width and height ? Let me know how to how to use ? @gregnb

[phelion]

Hi, what is the progress with this request? I'd really need to add custom filter options, because I don't always query all the data from the database, and then the values what are not in the list, but it's possible to exist, not showing in the filter options. @gregnb

[gregnb]

This is now available in the latest release. There are two column options filterList and filterOptions. I have removed the filterList from the root level options and now they must be provided per column.

Look at the README for an example. Thanks for all your patience.

[dafapramudya]

Hi @gregnb how can I custom filter type on each column? for ex: I have 3 columns: username(filterType: 'textField'), date(filterType: 'multiselect'), age(filterType: 'dropdown').

I already tried this on each column, but didn't work:

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,
        },
      }
]

[rayray93]

Hi @gregnb how can I custom filter type on each column? for ex: I have 3 columns: username(filterType: 'textField'), date(filterType: 'multiselect'), age(filterType: 'dropdown').

I already tried this on each column, but didn't work:

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,
        },
      }
]

@gregnb Hi there, really great project you have here ! thumbs up ;)

Im also interested in this option to filter each column with different filterType... is this possible or added todo list?
Thanks

@dafapramudya maybe already fixed this?

[dafapramudya]

@rayray93 nope

[Heera64]

How can I filter a date range?

[GeekeuzZ]

Hi @gregnb how can I filter a date range ?

[dafapramudya]

@Heera64 @GeekeuzZ Currently there is no feature to filter date range, if u wanna filter date, I recommended to use other libraries, for ex: react-date-range, then u need to get the date value from react-date-range and request API again with date range value query, and replace the previous data with the new data from query date API.

[GeekeuzZ]

@dafapramudya Thanks, I will try your solution

[sachin196]

Hi @gregnb , I want to add custom filter to mui Data table, where on filter button click an custom view will open depending the requirement and on apply filter or on reset filter button click i want to close that pop.Please help if anyone knows how to achieve this.
index.zip

[nmdhulipud]

Hello @gregnb
Scenario: Filter dialog box remains open after Applying Filters & only closes if the user clicks outside the dialog box
Requirement: I need filter dialog box closed, as soon as I apply filters on click of 'Apply button,
Is there any method I can use to complete this requirement?

[gabrielliwerant]

@nmdhulipud Yes there is, have a look at the severside-fitlers example.

[nmdhulipud]

@gabrielliwerant
In reference to your previous thread
https://github.com/gregnb/mui-datatables/issues/961#issuecomment-536048612

This states that Filter diloag closing on Button click is not possible for now, Is it now implemented in serverside ? as i had a look on serverside filters but was not able to find any function or hook which closes the filter dialog box.
Though i am doing kind of same as i am setting the serversidefilterlist in Redux and bind it to the options.
Let me know if i miss something? Thanks

[gabrielliwerant]

@nmdhulipud Sorry, misunderstood, no there isn't a way to fire the onClose manually, and it's pretty complicated to add this due to how the dialogs are created at the moment, so it's unlikely to happen anytime soon.