Таблица материалов Получение и установка значений фильтра

Получите работу с ловушкой изменения:

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

установка фильтра при монтировании может / должна работать с defaultFilter при определении каждого столбца.

Он состоит из двух частей: get и set.

• Получить - обрабатывается с помощью свойства tableRef в компоненте MaterialTable
• Set - обрабатывается значением 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 };