Material Table自定义列搜索过滤：实现状态文本筛选

要实现用户输入"Active"或"Inactive"就能筛选对应状态的行，只需在customFilterAndSearch属性中编写逻辑，将用户输入的文本映射为对应的数值（1/0），再与行数据的Active字段对比即可，同时兼容用户直接输入1/0的场景：

修改后的列配置代码 #

{
    title: <Typography className={classes.colHeader}>Active</Typography>,
    field: "Active",
    render: (rowData) => generateFlagText(rowData.Active),
    customFilterAndSearch: (term, rowData) => {
        // 统一转小写，支持不区分大小写搜索
        const lowerTerm = term.toLowerCase().trim();
        // 映射用户输入到对应的状态值
        if (lowerTerm === "active" || lowerTerm === "1") {
            return rowData.Active === 1;
        }
        if (lowerTerm === "inactive" || lowerTerm === "0") {
            return rowData.Active === 0;
        }
        // 输入其他内容时返回false，不匹配任何行；若需显示所有行可改为return true
        return false;
    },
},

优化建议：抽离状态映射逻辑（可选） #

为避免重复编写状态对应判断，可单独抽离映射对象，后续维护更便捷：

// 定义状态与文本的映射关系
const statusTextMap = {
    1: "active",
    0: "inactive"
};

// 简化后的customFilterAndSearch逻辑
customFilterAndSearch: (term, rowData) => {
    const lowerTerm = term.toLowerCase().trim();
    const rowStatusText = statusTextMap[rowData.Active];
    // 匹配状态文本或原始数值
    return rowStatusText === lowerTerm || rowData.Active.toString() === lowerTerm;
},

这样无论用户输入"Active"/"active"、"Inactive"/"inactive"还是1/0，都能正确筛选出对应行。

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