React-table 如何禁用单列全局筛选并为该列单独配置专属筛选功能

完全可以实现，react-table 原生支持全局筛选和列级筛选并行运行，两类筛选逻辑互相独立，可按需配置。

具体实现步骤 #

• 第一步：禁用指定列的全局筛选
  在目标列的配置项中添加 disableGlobalFilter: true 即可，开启后全局筛选的检索逻辑会自动跳过该列，不会用全局输入的关键词匹配该列的数据。
• 第二步：为该列添加专属筛选
  react-table 配套的 useFilters 插件原生支持列级筛选能力，直接在目标列的配置中定义 Filter 字段，渲染你需要的专属筛选组件（下拉选择、日期选择器、输入框等均可）即可，列级筛选的逻辑会单独生效，和全局筛选互不干扰。

配置示例代码 #

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

const columns = [
  // 其他普通列，默认参与全局筛选
  {
    Header: '姓名',
    accessor: 'name'
  },
  {
    Header: '状态',
    accessor: 'status',
    disableGlobalFilter: true, // 禁用全局筛选对该列的匹配
    // 自定义该列的专属筛选组件
    Filter: ({ column: { filterValue, setFilter } }) => (
      <select
        value={filterValue || ''}
        onChange={e => setFilter(e.target.value || undefined)}
      >
        <option value="">全部状态</option>
        <option value="active">激活</option>
        <option value="inactive">禁用</option>
        <option value="pending">待审核</option>
      </select>
    )
  }
]

// 表格实例化时引入对应插件即可
const tableInstance = useTable(
  { columns, data },
  useGlobalFilter, // 全局筛选插件
  useFilters // 列级筛选插件
)

效果说明 #

配置完成后，全局筛选输入框只会检索未禁用全局筛选的列，专属筛选的逻辑仅对当前列生效，两类筛选条件会同时作用于表格数据，符合要求的效果。

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