如何在@inovua/reactdatagrid-community中按列自定义筛选选项

核心逻辑 #

你可以通过列配置的filterOperators属性，针对单列指定需要展示的筛选算子，不需要的算子直接从配置数组中剔除即可，不需要修改全局配置。

具体实现示例 #

1. 姓名列仅保留「包含」筛选 #

在姓名列配置中仅传入contains对应算子，同时可以配置showFilterOperator: false隐藏算子下拉框，避免用户切换：

import ReactDataGrid from '@inovua/reactdatagrid-community';

const columns = [
  {
    name: 'userName',
    header: '姓名',
    type: 'string',
    showFilterOperator: false, // 隐藏筛选算子切换下拉
    filterOperators: [
      // 仅保留包含规则，可直接复用内置算子逻辑
      ...ReactDataGrid.filterOperators.string.filter(op => op.name === 'contains')
    ]
  },
  // 其他列配置...
]

2. 日期列仅保留「区间」筛选 #

日期列指定筛选类型为range，同时仅保留inrange算子即可：

const columns = [
  // 其他列配置...
  {
    name: 'createDate',
    header: '创建日期',
    type: 'date',
    filter: 'range', // 启用区间筛选输入组件
    showFilterOperator: false,
    filterOperators: [
      // 仅保留区间匹配规则
      ...ReactDataGrid.filterOperators.date.filter(op => op.name === 'inrange')
    ]
  }
]

补充说明 #

• 如果你需要自定义筛选逻辑，不需要复用内置算子，可以自行声明算子的name、label和匹配函数fn，替换上述示例中引入的内置算子即可。
• 所有内置支持的算子列表可以直接查阅包内types/columns.d.ts中的FilterOperator类型定义，无需查找外部文档。

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