如何在TanStack React Table中实现分页页码导航按钮

核心思路 #

借助TanStack Table的usePagination钩子获取分页状态与操作方法，自定义计算需展示的页码范围，再渲染对应的导航按钮，满足你指定的分页展示需求。

实现步骤与代码示例 #

1. 基础配置与钩子解构 #

首先确保表格已启用分页，并通过usePagination获取分页相关的状态和操作方法：

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

function CustomPaginationTable({ columns, data }) {
  // 初始化表格，配置分页参数
  const table = useReactTable({
    columns,
    data,
    pageCount: Math.ceil(data.length / 10), // 假设每页展示10条数据
    enablePagination: true,
  });

  // 解构分页所需的状态与方法
  const {
    pageIndex, // 当前页索引（从0开始）
    pageCount, // 总页数
    gotoPage, // 跳转到指定页（接收0-based索引）
    previousPage, // 切换到上一页
    nextPage, // 切换到下一页
    canPreviousPage, // 是否可跳转到上一页
    canNextPage, // 是否可跳转到下一页
  } = usePagination(table);

  // 计算需展示的页码（转换为用户感知的1-based页码）
  const currentActualPage = pageIndex + 1;
  const visiblePageNumbers = [];
  // 按需求：展示当前页之后的3页，不超过总页数
  const startPage = currentActualPage + 1;
  const endPage = Math.min(currentActualPage + 3, pageCount);
  for (let i = startPage; i <= endPage; i++) {
    visiblePageNumbers.push(i);
  }

  return (
    <div>
      {/* 表格主体 */}
      <table>
        <thead>
          {table.getHeaderGroups().map(headerGroup => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map(header => (
                <th key={header.id}>{header.renderHeader()}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map(row => (
            <tr key={row.id}>
              {row.getVisibleCells().map(cell => (
                <td key={cell.id}>{cell.renderCell()}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>

      {/* 自定义分页导航栏 */}
      <div style={{ marginTop: '16px', display: 'flex', gap: '8px' }}>
        {/* 上一页按钮 */}
        <button
          onClick={previousPage}
          disabled={!canPreviousPage}
        >
          上一页
        </button>

        {/* 展示指定页码按钮 */}
        {visiblePageNumbers.map(pageNum => (
          <button
            key={pageNum}
            onClick={() => gotoPage(pageNum - 1)} // 转换为0-based索引传入
            style={{ padding: '4px 8px' }}
          >
            {pageNum}
          </button>
        ))}

        {/* 下一页按钮 */}
        <button
          onClick={nextPage}
          disabled={!canNextPage}
        >
          下一页
        </button>
      </div>
    </div>
  );
}

2. 关键细节说明 #

• 索引转换：TanStack Table的pageIndex是0-based（从0开始），而用户感知的页码是1-based，所以在计算和跳转时需要做+1/-1的转换。
• 边界处理：通过Math.min(currentActualPage + 3, pageCount)确保展示的页码不会超过总页数，避免出现无效页码。
• 交互优化：利用canPreviousPage和canNextPage控制按钮的禁用状态，避免用户点击无效操作。

3. 可选扩展 #

如果需要更灵活的页码展示逻辑（比如同时显示当前页前后的页码），可以调整visiblePageNumbers的计算逻辑，示例如下：

// 展示当前页前2页、当前页、后2页，自动处理边界
const visiblePageNumbers = [];
const start = Math.max(1, currentActualPage - 2);
const end = Math.min(pageCount, currentActualPage + 2);
for (let i = start; i <= end; i++) {
  visiblePageNumbers.push(i);
}

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