来自外部的 mui-datatables 过滤器 [英] mui-datatables filter from outside

问题描述

我正在尝试从 mui 数据表外部设置过滤器.我想从表外的操作中传入过滤器的值.例如，单击具有预设过滤器的按钮.有没有api来获取外部事件并更改表的过滤器状态?

<代码>...常量选项 = {过滤器:真实，selectableRows: '多个',过滤器类型:'下拉'，响应:'垂直'，每页行数:10，//* 以某种方式在这里传递过滤器接收一些过滤器:this.state.tableFilter};const ageFilter = (age)=>{this.setState({tableFilter:age})}返回 (<div><Button onClick = {ageFilter(28)}>按年龄 28 过滤</Button><MUIDataTable title={"ACME Employee list>} data={data} columns={columns} options={options}/>

);}}导出默认示例；

解决方案

您可以通过更新每列的选项以及更新列选项的 filterList 数组来从外部设置过滤.

一个简单的例子(CodeSandbox在这里)

从mui-datatables"导入MUIDataTable；import { Select, MenuItem } from "@material-ui/core";import { useState } from react";导出默认函数 App() {const initCols = [{名称:名称"，标签:名称"，选项: {过滤器列表:[]}}];const [cols, setCols] = useState(initCols);const [selectedFilter, setSelectedFilter] = useState("All");常量数据 = [{ 名称:乔伊·崔比亚尼"},{名称:菲比布菲"},{名称:雷切尔格林"},{名称:罗斯盖勒"},{名称:莫妮卡盖勒"},{名称:钱德勒冰"}];const onFilter = ({ target: { value } }: any) =>{setSelectedFilter(value);constfilteredCols = [...cols];让过滤器列表 = [];如果(值！==所有"){filterList = [值];}//定位要过滤的列.filteredCols[0].options.filterList = filterList;setCols(filteredCols);};常量选项 = {过滤器:假};返回 (
<选择 onChange={onFilter} 值={selectedFilter}><MenuItem value=All">All</MenuItem>{data.map((x) => (<MenuItem key={x.name} value={x.name}>{x.name}</菜单项>))}<MUI数据表标题=过滤器"列={列}数据={数据}选项={选项}/>
);}

关键在 onFilter 函数中，它是我的外部控件(在本例中为 Select)的 onChange 侦听器.您需要将相应列的 options.filterList 更新为包含该列的行可能具有的确切值的数组.filterList 可以包含多个值，因此数组.将其设置为空数组以删除该列的过滤.当然你需要useState来控制列，否则它不会更新.

I am trying to set a filter from outside the mui-datatable. I would like to pass in the value of the filter from actions outside of the table. For example click a button which has a preset filter. Is there an api to take an external event and change the filter state of the table?

...

    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;

解决方案

You can set up filtering from the outside by updating the options for each column, and updating the filterList array of the column's options.

A simple example (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>
  );
}

The key is in the onFilter function, which is the onChange listener for my external control (a Select in this case). You need to update the appropriate column's options.filterList to an Array containing the exact value that a row might have for that column. That filterList can contain multiple values, hence the Array. Set it an empty Array to remove filtering for that column. And of course you need to useState to control the columns, otherwise it won't update.

这篇关于来自外部的 mui-datatables 过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！