React Table UI筛选类型选择问题：如何修改column的filter值

我正在用React Table和Bootstrap开发风格化表格，需要给列添加下拉菜单来选择筛选类型（等于、不等于、大于、小于等）。下拉菜单已实现，但无法修改列的筛选值。核心问题在CustomFilter组件中：下拉菜单选项的点击回调本该设置筛选值，但找不到类似setFilter的钩子来更新表格。想问是否有现成钩子可用？或是能否自行构建？

附下拉菜单截图：

1. 用React Table内置的setFilter方法 #

React Table本身提供了修改筛选值的API，在自定义筛选组件中，可直接从column对象中获取setFilter方法调用，以此更新对应列的筛选值。

2. 实现步骤 #

• 在CustomFilter组件中，解构column参数里的setFilter和当前筛选值filterValue
• 给下拉菜单选项绑定点击事件，调用setFilter传入合并了筛选类型和值的对象（比如{ type: 'gt', value: 10 }）
• 在表格的filterTypes配置中，自定义对应列的筛选逻辑，根据传入的筛选类型和值过滤数据

3. 核心代码示例 #

// CustomFilter.tsx
import React from 'react';
import { Dropdown } from 'react-bootstrap';

type FilterType = 'eq' | 'neq' | 'gt' | 'lt';

interface CustomFilterProps {
  column: any;
}

const CustomFilter: React.FC<CustomFilterProps> = ({ column }) => {
  const { setFilter, filterValue } = column;

  const handleFilterTypeChange = (type: FilterType) => {
    const newFilter = {
      type,
      value: filterValue?.value || ''
    };
    setFilter(newFilter);
  };

  return (
    <Dropdown>
      <Dropdown.Toggle variant="secondary" size="sm">
        {filterValue?.type || '筛选类型'}
      </Dropdown.Toggle>
      <Dropdown.Menu>
        <Dropdown.Item onClick={() => handleFilterTypeChange('eq')}>等于</Dropdown.Item>
        <Dropdown.Item onClick={() => handleFilterTypeChange('neq')}>不等于</Dropdown.Item>
        <Dropdown.Item onClick={() => handleFilterTypeChange('gt')}>大于</Dropdown.Item>
        <Dropdown.Item onClick={() => handleFilterTypeChange('lt')}>小于</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
};

export default CustomFilter;

在表格配置中添加自定义筛选类型：

const filterTypes = React.useMemo(
  () => ({
    customFilter: (rows: any[], id: string, filterValue: { type: FilterType; value: string | number }) => {
      if (!filterValue.value) return rows;
      const value = typeof filterValue.value === 'string' ? filterValue.value : Number(filterValue.value);
      return rows.filter(row => {
        const rowValue = row.values[id];
        switch (filterValue.type) {
          case 'eq':
            return rowValue === value;
          case 'neq':
            return rowValue !== value;
          case 'gt':
            return rowValue > value;
          case 'lt':
            return rowValue < value;
          default:
            return true;
        }
      });
    }
  }),
  []
);

// 在useTable中启用插件并配置filterTypes
const tableInstance = useTable(
  {
    columns,
    data,
    filterTypes
  },
  useFilters
);

4. 关键说明 #

• 无需自行构建钩子，column.setFilter是React Table官方提供的修改筛选值的方法
• 将筛选类型和值合并为对象传入setFilter，可在自定义筛选逻辑中同时获取两者，实现多条件筛选
• 必须在useTable中启用useFilters插件才能使用筛选功能

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