Блог

Я пытаюсь установить фильтр извне mui-datatable. Я хотел бы передать значение фильтра из действий за пределами таблицы. Например, нажмите кнопку с предустановленным фильтром. Существует ли API для получения внешнего события и изменения состояния фильтра таблицы?

 ...

    const options = {
      filter: true,
      selectableRows: 'multiple',
      filterType: 'dropdown',
      responsive: 'vertical',
      rowsPerPage: 10,

      //* pass filter somehow here
      receiveSomeFilter:this.state.tableFilter
    };
    const ageFilter = (age)=> {
        this.setState({tableFilter:age})
    }

    return (
        <div>
        <Button onClick = {ageFilter(28)}>Filter by age 28</Button>
      <MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} />
      </div>
    );

  }
}

export default Example;
 

Вы можете настроить фильтрацию извне, обновив параметры для каждого столбца и обновив filterList массив параметров столбца.

Простой пример (CodeSandbox здесь)

 import MUIDataTable from "mui-datatables";
import { Select, MenuItem } from "@material-ui/core";
import { useState } from "react";

export default function App() {
  const initCols = [
    {
      name: "name",
      label: "Name",
      options: {
        filterList: []
      }
    }
  ];
  const [cols, setCols] = useState(initCols);
  const [selectedFilter, setSelectedFilter] = useState("All");

  const data = [
    { name: "Joey Tribbiani" },
    { name: "Phoebe Buffay" },
    { name: "Rachel Green" },
    { name: "Ross Geller" },
    { name: "Monica Geller" },
    { name: "Chandler Bing" }
  ];

  const onFilter = ({ target: { value } }: any) => {
    setSelectedFilter(value);
    const filteredCols = [...cols];
    let filterList = [];
    if (value !== "All") {
      filterList = [value];
    }
    // Target the column to filter on.
    filteredCols[0].options.filterList = filterList;
    setCols(filteredCols);
  };

  const options = {
    filter: false
  };

  return (
    <div className="App">
      <Select onChange={onFilter} value={selectedFilter}>
        <MenuItem value="All">All</MenuItem>
        {data.map((x) => (
          <MenuItem key={x.name} value={x.name}>
            {x.name}
          </MenuItem>
        ))}
      </Select>
      <MUIDataTable
        title="Filter"
        columns={cols}
        data={data}
        options={options}
      />
    </div>
  );
}
 

Ключ находится в onFilter функции, которая является onChange прослушивателем для моего внешнего элемента управления (в данном случае Select). Вам необходимо обновить соответствующие столбцы options.filterList до массива, содержащего точное значение, которое может иметь строка для этого столбца. Это filterList может содержать несколько значений, отсюда и массив. Установите для него пустой массив, чтобы удалить фильтрацию для этого столбца. И, конечно, вам нужно useState управлять столбцами, иначе он не будет обновляться.