如何在React Tables中结合全局行过滤与关键词高亮功能？

核心逻辑为将过滤匹配逻辑和高亮渲染逻辑完全解耦，过滤环节直接匹配原始数据源，渲染环节再基于原始值和搜索关键词做高亮处理，完全避免渲染标签对过滤逻辑的干扰。

实现步骤 #

• 第一步：自定义全局过滤函数，直接匹配原始数据
  在实例化React Table时传入自定义的globalFilter函数，过滤时读取row.original拿到行的原始数据源做匹配，不要读取列渲染后的值：

// 自定义全局过滤逻辑
const customGlobalFilter = useCallback((rows, _, filterValue) => {
  if (!filterValue?.trim()) return rows
  const searchKey = filterValue.trim().toLowerCase()
  return rows.filter(row => {
    // 可自行指定需要参与搜索的字段，不指定默认遍历所有原始字段
    return Object.values(row.original).some(val => 
      typeof val === 'string' && val.toLowerCase().includes(searchKey)
    )
  })
}, [])

// 表格实例化时传入
const tableInstance = useTable(
  {
    columns,
    data,
    globalFilter: customGlobalFilter
  },
  useGlobalFilter
)

• 第二步：高亮逻辑仅在单元格渲染阶段执行
  列配置的accessor只返回原始字段值，不要提前做任何标签包裹处理，仅在Cell渲染器中基于当前全局搜索关键词做高亮替换：

// 关键词正则转义工具，避免特殊字符报错
const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')

// 单元格渲染组件
const HighlightCell = ({ value, globalFilter }) => {
  if (!value || !globalFilter?.trim()) return <>{value}</>
  const regex = new RegExp(`(${escapeRegExp(globalFilter.trim())})`, 'gi')
  const fragments = value.split(regex)
  return <>
    {fragments.map((frag, index) => 
      frag.match(regex) ? <mark key={index}>{frag}</mark> : frag
    )}
  </>
}

// 列配置示例
const columns = [
  {
    Header: '名称',
    accessor: 'name', // 直接返回原始的name字段值
    Cell: ({ value }) => <HighlightCell value={value} globalFilter={tableInstance.globalFilter} />
  }
]

可选优化 #

如果需要指定部分字段参与全局搜索，只需要修改自定义全局过滤函数中的匹配逻辑，指定读取row.original下的对应字段即可，无需调整渲染逻辑。

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