Mui-datatables: on custom filters, chip always displays

[terraswat]

When there are custom filters the chip always displays. When the X on the chip is clicked the filter does reset, but the chip remains.

Thank you for the awesome component! ❤️

Expected Behavior

I expect the chip to disappear when its X is clicked with custom filters.

Current Behavior

The chip does not disappear when its X is clicked with custom filters.

Steps to Reproduce (for bugs)

Use column options such as below:

    const options = {
        filter: true,
        filterList: filterText,
        filterType: 'custom',
        customFilterListRender: v => 'Filter On',
        filterOptions: {
            names: filterText,
            logic: filterOut,
            display: Display,
        },
        sort: false,
    }

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | @material-ui/[email protected] |
| MUI-datatables | [email protected] |
| React | [email protected] |
| browser | chrome 75.0.3770.142 |
| platform | mac |

[gabrielliwerant]

Hello @terraswat. Unfortunately, I can't verify the issue because your code contains a number of variables that I don't have. Can you provide a more complete example, ideally in https://codesandbox.io, so I can be sure we're looking at the same thing?

[gabrielliwerant]

Ok, so I messed around with the code, and I think I know the issue, although I'm not sure it's a bug.

The customFilterListRender is doing exactly what you are telling it, which is to always return the string 'Filter On'. This means it will always display that, no matter if you have a filter value or not. What you'd need to do is add something like

if (v.length) return 'Filter On';
else return false;

That way the custom filter will not return a string in the case that there is no filter. Depending on what you're trying to do, you may need more complicated logic because you probably need to specify each filter case (if this value exists, show something, otherwise, show nothing so the chip will vanish).

[terraswat]

Thank you Gabriel, that works! I used this code to set the chip visibility:

   customFilterListRender: v => {
            return (v !== undefined && v.length > 0 && v[0] !== '')
                ? 'Filter'
                : false
        },

A related question: Is there an option to programmatically call the 'reset filter' function?

I'm using a text field for the custom filtering and would like the filtering to be reset when the text field is empty of characters using the logic in the above conditional.

Currently the chip properly disappears when I reset by clicking the reset button on the filter pop-up, or by clicking the 'X' on the chip, however it does not disappear when I clear the text field.

[gabrielliwerant]

Glad that worked for you!

As to your other question, yes there is, but it involves managing the state of the filterList, like in this pseudo code:

this.state = { nameFilterList: ['Franky Miles'] };

const columns = {
  name: "Name",
  options: {
    filter: true,
    filterList: this.state.nameFilterList
  }
};

<button onClick={() => this.setState({ nameFilterList: [] })}>Reset Filters</button>

[terraswat]

Thank you Gabriel, that worked perfectly! Please carry on with this awesome package.

[akirwin]

Curious if this is an issue for anyone else? Returning false is just returning an empty chip when doing this:
customFilterListRender: v => { return (v !== undefined && v.length > 0 && v[0] !== '') ? 'Filter' : false },

[carlin-q-scott]

I'm not using a custom filter, and I have this problem when I set filterList to anything. The chips for the filters in the filterList will always be displayed, even though they are removed from the filterList in the tableState. They still have x's on them like they can be removed, but they can't be removed because they get added back immediately.