How to clear the filter inputs?

[cjsilva-umich]

How can I get the search strings for the filters to clear in material table? I'm using React and react-router-dom to create my project and I'm running into an issue where filter entries are not being cleared.

Currently, if a user is on a page that has a material-table and they filter the table data by putting a string in a column's filter field, their entry persists even if they navigate away from that page and then return.

Clearly, it would be better if the text that was entered into the filter field were cleared if the user navigates away from the page with the table and returns.

I saw suggestions of using and mutating a key that gets passed to the MaterialTable component in react. I've tried that, too, but the text entered into the filter field is still not cleared out.

Here's a codesandbox where I've replicated a very simple version of what I'm facing. From the home page, go to the Table, enter something into the filter field to filter the results. Click back to the home page and then back to the table page and the filter will still be populated with the previously entered filter value.

Clicking the 'reset' button will increment the tableKey that is passed to the table in an attempt to get it to remount the MaterialTable, but there's no effect.

Anyone else run into this or have a solution/suggestion?

[cjsilva-umich]

This is extremely stupid, but here is my workaround for this issue. It involves a cleanup function in a useEffect on the parent component. I incorporated the solution from this post where the person was trying to create a button to clear the filter values. This stuff is mentioned nowhere in the documentation (at least not anywhere that I could find on the filters section), so props to @Dos771 for posting their approach.

const ParentComponent = () => {
  const tableRef = useRef();
  useEffect(() => {
    return () => {
      if(tableRef.current){
        tableRef.current.dataManager.columns.map(item => {
          tableRef.current.onFilterChange(item.tableData.id, '');
        })
      }
    }
  }, [])
  // other stuff...
  <MaterialTable
    tableRef={tableRef}
    // other stuff...
  />
}

With that, upon navigation the ParentComponent will teardown and use the useEffect return, clearing out the filter values. I hope someone can point out a better/more native solution to this, because it seems silly to have to do it this way. Hopefully this helps anyone else that comes across this strange behavior and needs a solution.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.