如何获取React Table筛选后的数据用于Excel导出？

react-table（含后续迭代的TanStack Table版本）内置了筛选后数据的访问能力，不需要重复实现筛选逻辑，不同版本对应实现方式如下：

• TanStack Table v8 / React Table v7（主流钩子版本）
  初始化表格实例后，直接调用实例暴露的getFilteredRowModel()方法，即可拿到经过列筛选、全局筛选后的全量行数据，遍历取行的original属性就是你传入的原始业务数据结构，不会混入表格内部的自定义属性。
  示例代码：

  import { useReactTable, getCoreRowModel, getFilteredRowModel, getSortedRowModel } from '@tanstack/react-table'
  
  // 初始化表格实例
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(), // 别漏了注册这个行模型，少了这行拿不到正确的筛选结果
    // 其余筛选、排序、分页配置...
  })
  
  // 导出按钮触发逻辑
  const handleExportExcel = () => {
    // 仅筛选后的全量数据（不受分页影响）
    // 如果需要和表格当前排序顺序完全一致，替换为 table.getSortedRowModel().rows 即可
    const filteredRows = table.getFilteredRowModel().rows
    // 提取纯业务数据
    const exportSource = filteredRows.map(row => row.original)
  
    // 把exportSource传给xlsx、exceljs等导出库，执行后续Excel生成逻辑即可
    // 例：const worksheet = XLSX.utils.json_to_sheet(exportSource)
  }
  

  注意：如果表格开启了分页，不要用getPaginationRowModel()取数，这个API只会返回当前页的筛选结果，不是全量符合筛选条件的数据。
• React Table v6 及更早旧版本
  旧版本实例直接暴露了filteredRows属性，直接读取即可拿到筛选后的行数据：

  const { filteredRows } = useTable({
    data,
    columns,
    // 筛选相关配置
  })
  
  const handleExport = () => {
    const exportSource = filteredRows.map(row => row.original)
    // 执行后续导出逻辑
  }
  

• 服务端筛选场景
  如果你的筛选逻辑是走接口请求、数据由后端返回后存在前端状态中，不需要从表格实例取数，直接把当前传给表格组件的数据源（也就是接口返回的筛选结果集）作为导出源即可，这种场景下表格拿到的data本身就已经完成筛选了。

避坑提醒：不要自己重写筛选逻辑去匹配表格的筛选状态，很容易和组件内置的筛选规则（比如数字、日期的匹配逻辑，全局筛选的范围配置）不一致，导致导出数据和页面展示不符，优先用实例内置方法取数，能保证导出结果和用户在页面看到的筛选结果完全一致。

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