ReactTable v7排序分页状态下新增/编辑行不在当前页如何解决？

ReactTable v7 没有提供自动跳转至新增/编辑行的内置专用API，可通过其原生暴露的状态与方法实现该需求，无需像v6版本一样通过ref获取表格实例。

实现逻辑 #

v7 为hooks驱动的架构，你可以直接从useReactTable的返回值中获取prePaginationRows（经过排序、过滤处理但未做分页的完整行数据），定位目标行的索引后计算对应页码，调用官方提供的setPage方法即可完成页码跳转。

示例代码 #

import { useReactTable, useSortBy, useFilters, usePagination } from 'react-table'

function YourTableComponent() {
  // 你的原有业务逻辑：columns、data、editedElementId、pageSize受控逻辑等
  const [editedElementId, setEditedElementId] = useState(null)

  const {
    prePaginationRows,
    setPage,
    state: { pageSize },
    // 其他你需要的表格方法，比如getTableProps等
  } = useReactTable({
    columns,
    data,
    // 注册必要的插件
    plugins: [useSortBy, useFilters, usePagination],
    // 你的其他原有配置，比如初始页码、初始排序规则等
  })

  // 监听编辑/新增元素ID变化，自动跳转到对应页
  useEffect(() => {
    if (!editedElementId) return
    // 定位目标行在排序/过滤后的完整列表中的索引
    const targetIndex = prePaginationRows.findIndex(
      row => row.original.id === editedElementId
    )
    if (targetIndex < 0) {
      alert.info("Element not visible")
      return
    }
    // 计算目标页码（v7页码从0开始计数）
    const targetPage = Math.floor(targetIndex / pageSize)
    setPage(targetPage)
  }, [editedElementId, prePaginationRows, pageSize, setPage])

  // 剩余的表格渲染逻辑
}

注意事项 #

• 必须在useReactTable的插件配置中注册useSortBy、useFilters、usePagination，prePaginationRows才会返回经过排序、过滤处理的正确结果
• 该逻辑天然兼容表格过滤场景，若目标行被过滤规则排除，会触发找不到元素的提示，和你v6版本的实现逻辑完全对齐

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