来自外部的 mui-datatables 过滤器

编程问答 2022-06-02

问题描述

我正在尝试从 mui 数据表外部设置过滤器。我想从表外的操作中传入过滤器的值。例如，单击具有预设过滤器的按钮。有没有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 here)

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 函数中，它是我的外部控件（在本例中为 Select）的 onChange 侦听器。您需要将相应列的 options.filterList 更新为一个数组，该数组包含某行对该列可能具有的确切值。 filterList 可以包含多个值，因此数组。将其设置为空数组以删除该列的过滤。当然你需要useState来控制列，否则它不会更新。

mui-datatablereactjsreactjsreactjsreactjs