物料表获取和设置过滤器值

问题描述

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

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

解决方法

这有两个部分，获取和设置。

• 获取-通过在tableRef组件上使用MaterialTable道具来处理
• 设置-通过列对象上的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",{ 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 };

,

Get与变更挂钩：

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"
  }
]

在每个列定义中，{/ {1}}可以/应该在挂载上设置过滤器。