React MaterialTable clear all filters action - column and global filter

Question

I am absolutely new to react. It may trivial but I can't figure how to implement action that will clear all table filters.

In my table, I use date filter, drop-down, text, and global filters looking for one-click clear all filters

https://codesandbox.io/s/eager-thunder-ejlg5?file=/src/index.js

  <MaterialTable
      title="Free Action Preview"
      columns={[
        { title: "Name", field: "name" },
        { title: "Surname", field: "surname" },
        { title: "Birth Year", field: "birthYear", type: "numeric" },
        {
          title: "Birth Place",
          field: "birthCity",
          lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
        }
      ]}
      data={[
        { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
        {
          name: "Zerya Betül",
          surname: "Baran",
          birthYear: 2017,
          birthCity: 34
        }
      ]}
      actions={[
        {
          icon: () => <FilterNoneIcon />,
          tooltip: "clear all filters",
          isFreeAction: true,
          onClick: (event) => alert("clear all filters logic")
        }
      ]}
      options={{
        filtering: true,
        sorting: true
      }}
    />

please read stackoverflow.com/help/minimal-reproducible-example provide some minimal code that reproduces the issue so viewers can understand better. — Prasad Phule
@ Prasad Phule added a sample project and I do know StackOverflow roles pretty good!.. this is a really strength forward question — Happy Coder

95faf8e76605e973 95faf8e76605e973 · Accepted Answer · 2020-10-05T21:10:33

As of this writing, it does not look like they have a clear filter functionality - according to this issue at least: https://github.com/mbrn/material-table/issues/1132 since they tagged it as wontfix - meaning they are not planning to work on it. However, on the same issue, 1 of the users recommended using a ref and manually accessing the table to filter the data (although that user later advised against it) - so you can try that as well.

Another way you could do this is to just remount the component. Since the component is remounted, it will begin at its initial state including unfiltered data

function App() {
  const [muiTableKey, setMuiTableKey] = React.useState(0);

  return (
    <MaterialTable
      key={muiTableKey}
      actions={[
        {
          icon: () => <FilterNoneIcon />,
          tooltip: "clear all filters",
          isFreeAction: true,
          onClick: (event) => {
            setMuiTableKey(muiTableKey + 1); // set new key causing remount
          }
        }
      ]}

React MaterialTable clear all filters action - column and global filter

1 Answers