如何在React-Table中针对过滤后的数据重置行索引

问题根因 #

你当前拿到的是原始数据集的索引，没有绑定React Table处理后的可见行列表。React Table经过滤、排序后输出的rows数组才是当前页面实际渲染的行数据集合，原始索引和该数组的下标无直接关联。

实现步骤 #

• 从useTable返回值中拿到rows字段，该字段会随过滤、排序操作实时更新，始终对应当前可见的所有行
• 选中行时存储行的唯一标识row.id，不要直接存储索引值
• 通过useMemo监听rows和选中的行ID，动态计算当前选中行在可见列表中的下标

核心代码示例 #

首先是表格实例初始化部分：

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

function YourTable() {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows, // 过滤/排序后的当前可见行数组
    prepareRow,
  } = useTable(
    { columns, data },
    useFilters // 按需引入你用到的表格插件
  )
  const [selectedRowId, setSelectedRowId] = useState(null)

  // 动态计算选中行的可见索引
  const selectedVisibleIndex = useMemo(() => {
    if (!selectedRowId) return '-'
    return rows.findIndex(row => row.id === selectedRowId)
  }, [selectedRowId, rows])

  // 行渲染逻辑
  return (
    <div>
      <table {...getTableProps()}>
        {/* 表头渲染逻辑省略 */}
        <tbody {...getTableBodyProps()}>
          {rows.map(row => {
            prepareRow(row)
            return (
              <tr {...row.getRowProps()}>
                <td>
                  <input
                    type="radio"
                    name="rowSelect"
                    checked={selectedRowId === row.id}
                    onChange={() => setSelectedRowId(row.id)}
                  />
                </td>
                {/* 其余列渲染逻辑省略 */}
              </tr>
            )
          })}
        </tbody>
      </table>
      {/* 底部展示选中索引 */}
      <div>选中行索引：{selectedVisibleIndex}</div>
    </div>
  )
}

注意事项 #

不要直接存储行渲染时map方法返回的下标，过滤操作后rows数组会更新，原存储的下标会失效。每次都基于最新的rows数组计算索引，才能保证数值和当前可见行顺序一致。

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