使用React-table的useFilters基于非展示元数据实现表格行过滤

react-table 的 useFilters 过滤逻辑仅依赖列配置和原始数据集，和列是否渲染到表格视图没有关联，不需要手动渲染隐藏DOM实现，按照以下步骤配置即可：

• 首先在列配置中新增用于过滤的隐藏字段配置，和普通展示列一样配置过滤规则，不需要配置表头渲染内容：

const columns = [
  // 原有展示列
  {
    Header: '标题',
    accessor: 'title'
  },
  {
    Header: '作者',
    accessor: 'author'
  },
  // 新增仅用于过滤的category列配置
  {
    accessor: 'category',
    // 按需配置过滤规则，内置支持equals、text、exactText等，也可自定义过滤函数
    filter: 'equals'
  }
]

• 初始化表格实例时，通过hiddenColumns配置标记需要隐藏的过滤字段，react-table会自动跳过这些列的渲染，无需额外加样式隐藏：

import { useTable, useFilters } from 'react-table'

const tableInstance = useTable(
  {
    columns,
    data,
    // 标记category列为隐藏列，不会渲染到表格视图
    hiddenColumns: ['category']
  },
  useFilters
)

// 取出过滤操作方法
const { setFilter } = tableInstance

• 直接调用setFilter方法操作隐藏字段的过滤规则即可，用法和展示列完全一致：

// 过滤出所有分类为math的行
setFilter('category', 'math')

// 清空category字段的过滤条件
setFilter('category', undefined)

如果需要自定义过滤逻辑，直接给隐藏列的filter属性传入自定义过滤函数即可，和普通展示列的自定义过滤规则配置没有任何差异。

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