如何限制Material UI DataGrid仅显示指定过滤操作符（如contains）

全局配置（所有列生效） #

通过DataGrid的filterOperators属性全局替换默认过滤器操作符列表，仅保留"contains"选项；再利用slotProps配置在仅存单个操作符时隐藏选择菜单。

完整代码示例

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

// 定义仅包含"contains"的自定义过滤器操作符
const customFilterOperators: GridFilterOperator[] = [
  {
    label: '包含',
    value: 'contains',
    getApplyFilterFn: (filterItem) => {
      if (!filterItem.value) return null;
      // 实现忽略大小写的包含过滤逻辑
      return (row) =>
        String(row[filterItem.field]).toLowerCase().includes(filterItem.value.toLowerCase());
    },
  },
];

// 示例数据
const rows = [
  { id: 1, name: '张三', age: 28 },
  { id: 2, name: '李四', age: 32 },
  { id: 3, name: '王五', age: 25 },
];

const columns = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'name', headerName: '姓名', width: 150 },
  { field: 'age', headerName: '年龄', width: 100 },
];

export default function SingleFilterOperatorGrid() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        filterOperators={customFilterOperators}
        slotProps={{
          headerFilter: {
            // 当操作符数量为1时，隐藏操作符选择菜单
            operatorSelectProps: (params) => ({
              hidden: params.operators.length === 1,
            }),
          },
        }}
      />
    </div>
  );
}

针对特定列单独配置 #

若无需全局生效，可在目标列的定义中单独设置filterOperators属性：

const columns = [
  {
    field: 'name',
    headerName: '姓名',
    width: 150,
    // 仅该列使用自定义操作符
    filterOperators: customFilterOperators,
  },
  // 其他列保持默认操作符
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'age', headerName: '年龄', width: 100 },
];

关键配置说明 #

• filterOperators：接收GridFilterOperator数组，自定义列的可用过滤器操作符，此处仅保留"contains"逻辑，覆盖默认的equals、starts with等选项。
• slotProps.headerFilter.operatorSelectProps：通过回调判断当前列的操作符数量，当仅存在1个操作符时隐藏选择菜单，简化用户操作界面。

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