React Table v8：如何获取preFilteredRow值作为自定义筛选下拉选项

要从preFilteredRows中自动提取列数据作为下拉筛选选项，你可以借助TanStack Table提供的table实例和column对象实现，无需手动编写<option>。具体步骤如下：

1. 更新TypeScript类型声明 #

先扩展filterComponent的props类型，让它能接收table和column实例：

declare module '@tanstack/table-core' {
  interface ColumnMeta<TData extends unknown, TValue> {
    filterComponent: (props: {
      setFilterValue: (value: TValue | undefined) => void;
      column: Column<TData, TValue>;
      table: Table<TData>;
    }) => React.ReactNode;
  }
}

2. 修改Column Helper配置 #

在filterComponent中通过table.getPreFilteredRows()获取预筛选行数据，提取当前列的唯一值并生成选项：

const columns = [
  columnHelper.accessor('attributes.category.data.attributes.name', {
    cell: (info) => info.getValue(),
    header: 'Categori',
    meta: {
      filterComponent({ setFilterValue, column, table }) {
        // 获取所有预筛选行（未受当前列筛选影响的原始数据）
        const preFilteredRows = table.getPreFilteredRows();
        
        // 提取当前列的所有值并去重
        const uniqueOptions = Array.from(
          new Set(preFilteredRows.map(row => column.getValue(row.original)))
        ).filter(Boolean); // 过滤空值，避免无效选项

        return (
          <select
            name="Category"
            aria-label="Category"
            className="block w-full rounded-lg border-gray-200 text-sm shadow focus:border-green-500 focus:ring-1 focus:ring-green-500 focus:ring-opacity-75"
            onChange={(e) => setFilterValue(e.target.value || undefined)}
          >
            <option value="">All</option>
            {uniqueOptions.map(option => (
              <option key={option} value={option}>
                {option}
              </option>
            ))}
          </select>
        );
      },
    },
  }),
]

关键说明 #

• table.getPreFilteredRows()：获取所有未经过当前列筛选的行数据，确保选项集合基于完整初始数据集（不受其他列筛选影响）。
• column.getValue(row.original)：通过列对象的统一方法取值，适配嵌套路径或自定义accessor场景，比直接访问对象属性更可靠。
• new Set() + Array.from()：快速实现值的去重，避免下拉列表出现重复选项。
• 空值过滤：确保下拉选项中不会出现空字符串或undefined的无效项。

如果你的表格使用服务端分页/筛选，getPreFilteredRows()只能拿到当前页的数据，此时需要从服务端接口获取该列的所有唯一值并传入组件，逻辑类似，仅数据源替换为接口返回值即可。

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