Material Table 获取和设置过滤器值

Question

如何使用 material-table 以编程方式获取和设置过滤器值？

我希望用户能够将过滤器配置保存为报告并在需要时调用它们。

Answer 1

这有两个部分，get 和 set。

获取 - 通过在 MaterialTable 组件上使用 tableRef 道具进行处理
设置 - 通过列对象上的 defaultFilter 值处理。

import MaterialTable from "material-table";
import React, { useRef } from "react";
import { tableIcons } from "./tableIcons";

const firstNameFilter = 'Neil'

function App() {
  const tableRef = useRef<any>();
  return (
    <div>
      <button onClick={saveFilters(tableRef)}>Filters</button> // GET OCCURS HERE
      <MaterialTable
        tableRef={tableRef}
        icons={tableIcons}
        columns={[
          { title: "First", field: "name", defaultFilter: firstNameFilter }, // SET OCCURS HERE
          { title: "Last", field: "surname" }
        ]}
        data={[
          { name: "Neil", surname: "Armstrong" },
          { name: "Lance", surname: "Armstrong" },
          { name: "Bob", surname: "Hope" }
        ]}
        options={{ filtering: true }}
        title="Reports"
      />
    </div>
  );
}

function saveFilters(tableRef: React.MutableRefObject<any>) {
  return function handler() {
    const columns = tableRef?.current?.state.columns.map((column: any) => ({
      field: column.field,
      filterValue: column.tableData.filterValue
    }));
    console.log(JSON.stringify(columns, null, 2));
  };
}

export { App };

Answer 2

在更改时使用钩子获取作品：

onFilterChange={(filters) => {
  console.log('onFilterChange', filters);
}}

结果是每列的过滤器定义数组，如下所示：

[
// [...]
  {
    "column": {
      "title": "Date",
      "field": "file_date",
      "type": "date",
      "tableData": {
        "columnOrder": 3,
        "filterValue": "2020-11-10T15:20:00.000Z",
        "groupSort": "asc",
        "width": "...", // lots of css calc stuff... :(
        "additionalWidth": 0,
        "id": 4
      }
    },
    "operator": "=",
    "value": "checked"
  }
]

在挂载上设置过滤器 could/should 在每个列定义中使用 defaultFilter。

Material Table 获取和设置过滤器值

Material Table Get and Set Filter Values

javascript

reactjs

material-ui

material-table