React Table v7 Hooks版本如何用setAllFilters实现多值年龄过滤

嘿，我来帮你搞定这个多值OR过滤的需求！React Table默认的过滤器是精确匹配单个值，要实现“年龄为15或18”的筛选，我们需要自定义过滤器函数来支持数组格式的过滤条件，具体步骤如下：

1. 编写自定义年龄过滤器函数 #

这个函数会接收当前行数据、列ID和过滤值，我们需要判断每行的年龄是否在过滤值数组中，同时兼容单个值的情况：

const ageFilter = (rows, id, filterValue) => {
  // 统一把过滤值转成数组，兼容单个值和多值场景
  const targetAges = Array.isArray(filterValue) ? filterValue : [filterValue];
  return rows.filter(row => targetAges.includes(row.values.age));
};

2. 在列定义中绑定自定义过滤器 #

给age列指定我们的自定义过滤器，还可以搭配multiSelect变体来提供友好的多选下拉UI（可选，但能提升交互体验）：

const columns = [
  {
    Header: 'Name',
    accessor: 'name',
  },
  {
    Header: 'Age',
    accessor: 'age',
    filter: ageFilter, // 绑定自定义过滤器
    filterVariant: 'multiSelect', // 启用多选下拉UI
    filterSelectOptions: [15, 18, 20], // 提供可选的年龄选项
  },
];

3. 使用setAllFilters传入数组格式的过滤条件 #

现在你只需要把过滤值改成数组，就能实现OR逻辑的筛选了：

// 筛选年龄为15或18的人员
setAllFilters({ age: [15, 18] });

如果不需要内置的multiSelectUI，比如你想用自定义的复选框组来选择年龄，只要确保传给setAllFilters的age值是数组格式，自定义过滤器就会正常工作。

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