如何在Tanstack-table表格外实现name列的自定义搜索过滤器？

步骤1：添加列过滤器状态 #

首先在组件中引入ColumnFiltersState类型（TypeScript环境），并创建状态管理列过滤器：

import { ColumnFiltersState, useReactTable } from '@tanstack/react-table';
import { useState } from 'react';

// ... 其他组件代码

const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);

步骤2：更新useReactTable配置 #

将列过滤器状态和回调函数加入表格配置，让表格感知过滤器变化：

const table = useReactTable({
  data: data ?? [],
  columns,
  enableColumnFilters: true,
  enableFilters: true,
  state: {
    sorting,
    columnFilters, // 绑定列过滤器状态
  },
  onSortingChange: setSorting,
  onColumnFiltersChange: setColumnFilters, // 绑定过滤器更新回调
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  getSortedRowModel: getSortedRowModel(),
  debugTable: true,
});

步骤3：绑定外部搜索框到过滤器状态 #

修改input元素，将其值与name列的过滤器绑定，并在输入时更新过滤器：

<section>
  <LeftTitle>Moves</LeftTitle>
  <input
    type="text"
    placeholder="搜索名称..."
    // 获取当前name列的过滤值（列id为'sort'）
    value={columnFilters.find(f => f.id === 'sort')?.value || ''}
    onChange={(e) => {
      const inputValue = e.target.value.trim();
      setColumnFilters(prevFilters => {
        // 检查是否已存在name列的过滤器
        const hasNameFilter = prevFilters.some(f => f.id === 'sort');
        
        if (inputValue) {
          if (hasNameFilter) {
            // 更新现有过滤器的值
            return prevFilters.map(f => 
              f.id === 'sort' ? { ...f, value: inputValue } : f
            );
          } else {
            // 添加新的过滤器
            return [...prevFilters, { id: 'sort', value: inputValue }];
          }
        } else {
          // 清空输入时移除name列的过滤器
          return prevFilters.filter(f => f.id !== 'sort');
        }
      });
    }}
  />
  <TableContainer ref={tableContainerRef}>
    <FullWidthTable>
      {tableHeader()}
      {tableBody()}
    </FullWidthTable>
  </TableContainer>
</section>

步骤4：（可选）自定义列过滤逻辑 #

如果需要更灵活的过滤规则（比如不区分大小写、模糊匹配），可以在name列的配置中添加filterFn：

{
  accessorKey: `name`,
  id: `sort`,
  header: `Name`,
  // 使用内置的不区分大小写包含匹配
  filterFn: 'includesString',
  // 或者自定义过滤函数
  // filterFn: (row, columnId, filterValue) => {
  //   const name = row.getValue(columnId) as string;
  //   return name.toLowerCase().includes((filterValue as string).toLowerCase());
  // },
  cell: (info) => (
    <TBold>
      <TLink
        href={{
          pathname: `/move/[name]`,
          query: { name: info.getValue<string>() },
        }}
      >
        {removeDash(info.getValue<string>())}
      </TLink>
    </TBold>
  )
}

原理说明 #

TanStack Table通过columnFilters状态管理所有列的过滤条件，搭配getFilteredRowModel()插件自动处理行数据的过滤逻辑。外部搜索框只需更新对应列的过滤值，表格就会自动重新计算并渲染过滤后的结果，无需手动处理数据筛选。

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