#javascript #reactjs #material-ui #material-table
#javascript #reactjs #материал-пользовательский интерфейс #материал-таблица
Вопрос:
Как я могу получить и установить значения фильтра программно с помощью material-table
?
Я хочу, чтобы пользователи могли сохранять конфигурации фильтров в виде отчетов и вызывать их по мере необходимости.
Ответ №1:
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"
}
]
установка фильтра при монтировании может / должна работать с defaultFilter
при определении каждого столбца.
Ответ №2:
Это состоит из двух частей: get и set.
- Обрабатывается с помощью
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", 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 };