Reactjs 反应物料表过滤

我正在尝试为材质表实现一个自定义过滤器

表格数据为：

[
  {
    name: "Tomato",
    color: "red",
    quantity: 12,
    id: "01"
  },
  {
    name: "Banana",
    color: "yellow",
    quantity: 5,
    id: "02"
  },
  {
    name: "Lemon",
    color: "yellow",
    quantity: 20,
    id: ""
  },
  {
    name: "Blueberry",
    color: "blue",
    quantity: 50,
    id: ""
  }
]

栏目：

[
  {
    title: "Name",
    field: "name",
    filterComponent: props => {
      return (
        <FormControlLabel
          control={<Checkbox color="primary" />}
          label="Custom filter"
          labelPlacement="end"
        />
      );
    }
  },
  { title: "Color", field: "color", filtering: false },
  { title: "Quantity", field: "quantity", filtering: false },
  { title: "Code", field: "code", filtering: false, hidden: true }
]

[
{
标题：“姓名”，
字段：“名称”，
过滤器组件：道具=>{
返回(
);
}
},
{标题：“颜色”，字段：“颜色”，过滤：false}，
{标题：“数量”，字段：“数量”，筛选：false}，
{标题：“代码”，字段：“代码”，筛选：false，隐藏：true}
]

链接到代码沙盒

---

我试图实现的复选框过滤器必须隐藏/显示所有具有空字符串“id”属性的行

要实现自定义筛选，我们需要在终端更改数据。为此，我做了以下更改

为数据定义状态挂钩复选框状态（&T）

const[data，setData]=useState（[…testData]）；
const[checked，setChecked]=使用状态（false）；

在

control

中，我使用复选框的当前操作状态（

true或false）调用了
filterValue

}
label=“自定义过滤器”
labelPlacement=“结束”
/>

我根据您提到的条件筛选数据（
id
不应为空）

const filterValue=（值）=>{
如果（值）{
const filtered=data.filter（d=>d.id.trim（）.length>0）；
setData（filtered）//如果选中复选框，则设置筛选数据
}否则{
setData（[…testData]）//否则设置原始数据，即testData
}
setChecked（值）
}

在
MaterialTable
中，我将
testData
替换为
data



工作示例
要实现自定义筛选，我们需要在终端更改数据。为此，我做了以下更改

为数据定义状态挂钩复选框状态（&T）

const[data，setData]=useState（[…testData]）；
const[checked，setChecked]=使用状态（false）；

在
control
中，我使用复选框的当前操作状态（
true或false）调用了
filterValue

}
label=“自定义过滤器”
labelPlacement=“结束”
/>

我根据您提到的条件筛选数据（
id
不应为空）

const filterValue=（值）=>{
如果（值）{
const filtered=data.filter（d=>d.id.trim（）.length>0）；
setData（filtered）//如果选中复选框，则设置筛选数据
}否则{
setData（[…testData]）//否则设置原始数据，即testData
}
setChecked（值）
}

在
MaterialTable
中，我将
testData
替换为
data



工作示例