如何根据数据字段值在material-table中隐藏对应行？

需求说明 #

• 表格数据源包含Active字段，值为0代表未激活，值为1代表激活
• 工具栏增加「隐藏未激活对象」复选框：勾选时仅展示激活状态数据，取消勾选展示全量数据
• 基于@material-ui/core + material-table 技术栈实现

现有代码 #

const [intakes, setIntakes] = useState([]);

function IntakeList() {
    const CustomToolbarComponent = (props) => {
        return (
            <div
                style={{
                    display: "flex",
                    justifyContent: "flex-end",
                    alignItems: "center",
                }}
            >
                <FormControlLabel control={<Checkbox />} label="Hide inactive objects" />
                <div>
                    <MTableToolbar {...props} />
                </div>
            </div>
        );
    };

    return (
        <MaterialTable
            title=""
            data={intakes.intakes}
            columns={columns}
            components={{
                Toolbar: (props) => <CustomToolbarComponent {...props} />,
            }}
        />
    );
}

数据示例 #

{
  "intakes": [
    {
      "ID": 1,
      "Active": 0
    },
    {
      "ID": 2,
      "Active": 1
    }
  ]
}

实现代码 #

核心改动点：

• 新增独立state存储复选框选中状态
• 复选框绑定变更事件同步状态
• 基于状态动态过滤传入表格的数据源
• 调整工具栏布局避免元素重叠

import { useState, useMemo } from 'react';
import { Checkbox, FormControlLabel } from '@material-ui/core';
import MaterialTable, { MTableToolbar } from 'material-table';

// 给intakes设置默认值，避免首次加载读取属性时空指针报错
const [intakes, setIntakes] = useState({ intakes: [] });
// 控制是否隐藏未激活项的状态
const [hideInactive, setHideInactive] = useState(false);

function IntakeList() {
    const CustomToolbarComponent = (props) => {
        return (
            <div
                style={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                    padding: "0 16px"
                }}
            >
                <MTableToolbar {...props} />
                <FormControlLabel 
                    control={
                        <Checkbox 
                            checked={hideInactive}
                            onChange={(e) => setHideInactive(e.target.checked)}
                        />
                    } 
                    label="隐藏未激活对象" 
                />
            </div>
        );
    };

    // 缓存过滤后的表格数据，避免无关重渲染
    const tableData = useMemo(() => {
        return hideInactive 
            ? intakes.intakes.filter(item => item.Active === 1)
            : intakes.intakes;
    }, [intakes.intakes, hideInactive]);

    return (
        <MaterialTable
            title=""
            data={tableData}
            columns={columns}
            components={{
                Toolbar: (props) => <CustomToolbarComponent {...props} />,
            }}
        />
    );
}

补充说明 #

• 动态传入过滤后data的方式不会破坏material-table自带的搜索、排序、分页等内置功能，所有操作会基于当前展示的数据集生效
• 工具栏布局改用space-between对齐，让原生工具栏居左、自定义复选框居右，不会出现控件重叠挤压的问题

内容的提问来源于stack exchange，提问作者Ciaran Crowley