React MaterialTable 清除所有过滤器操作 - 列和全局过滤器

Question

我对反应完全陌生。这可能微不足道，但我不知道如何实施清除所有 table 过滤器的操作。

在我的 table 中，我使用日期过滤器、下拉菜单、文本和全局过滤器寻找一键清除所有过滤器

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
      }}
    />

Answer 1

在撰写本文时，他们似乎没有明确的过滤器功能 - 至少根据这个问题：https://github.com/mbrn/material-table/issues/1132 因为他们将其标记为 wontfix - 这意味着他们没有计划去处理它。但是，在同一问题上，有 1 位用户建议使用 ref 并手动访问 table 来过滤数据（尽管该用户后来反对这样做）- 因此您也可以尝试这样做。

您可以执行此操作的另一种方法是重新安装组件。由于组件已重新安装，它将以初始状态开始，包括未过滤的数据

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 清除所有过滤器操作 - 列和全局过滤器

React MaterialTable clear all filters action - column and global filter

reactjs

material-ui

material-table