MUI X Data Grid是否原生支持notContains过滤器？求官方说明或实现方案

原生支持情况 #

MUI X Data Grid没有原生提供notContains过滤器，官方默认内置的过滤器列表仅包含contains、isEmpty、isNotEmpty、equals、notEquals等操作，官方文档中也未提及该过滤器的原生支持。

自定义实现方法 #

要实现notContains过滤功能，需要手动自定义过滤器操作，核心是扩展列的filterOperators配置，实现对应的过滤逻辑。

步骤示例 #

1. 定义notContains过滤器操作对象
2. 在目标列的配置中添加该操作
3. 实现过滤判断逻辑

import { GridFilterOperator, GridFilterOperators } from '@mui/x-data-grid';

// 自定义notContains过滤器操作
const notContainsOperator: GridFilterOperator = {
  label: '不包含',
  value: 'notContains',
  getApplyFilterFn: (filterItem) => {
    // 过滤值为空时，返回null表示不应用过滤
    if (!filterItem.value) {
      return null;
    }
    // 实现反向包含的过滤逻辑
    return (cellValue) => {
      if (cellValue == null) {
        return false;
      }
      return !String(cellValue).toLowerCase().includes(String(filterItem.value).toLowerCase());
    };
  },
};

// 在列配置中启用该过滤器
const columns = [
  {
    field: 'username',
    headerName: '用户名',
    width: 180,
    // 合并原有过滤器操作与自定义的notContains
    filterOperators: [notContainsOperator, ...GridFilterOperators.contains],
  },
];

配置完成后，该列的过滤器下拉菜单会新增“不包含”选项，输入内容后即可筛选出不包含指定文本的行数据。

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