react-table v7服务端分页下如何实现全选所有页面的行？

由于服务端分页时React-Table仅加载当前页数据，默认全选逻辑只会处理当前页。要实现全选所有页面的行，需要自定义状态管理和选中逻辑，具体步骤如下：

1. 维护全局选中状态 #

在组件中添加两个状态，分别标记全选状态和存储跨页面的选中行ID：

import { useState } from 'react';

// 标记是否全选所有页面的行
const [isAllSelected, setIsAllSelected] = useState(false);
// 存储所有选中的行ID（跨页面）
const [selectedRowIds, setSelectedRowIds] = useState(new Set());

2. 配置RowSelect的自定义选中判断 #

在useTable配置中，通过rowSelect.getIsRowSelected自定义行选中逻辑：全选状态下所有行标记为选中，否则仅判断当前行ID是否在选中集合中：

const tableInstance = useTable(
  {
    columns,
    data,
    initialState: { pageIndex: 0 },
    manualPagination: true,
    pageCount: pageCount, // 从API获取的总页数
    rowSelect: {
      getIsRowSelected: (row) => {
        if (isAllSelected) return true;
        return selectedRowIds.has(row.original.id);
      },
    },
  },
  usePagination,
  useRowSelect,
  // 自定义表头全选列
  (hooks) => {
    hooks.visibleColumns.push((columns) => [
      {
        id: 'select-all',
        Header: () => (
          <input
            type="checkbox"
            // 复选框状态：全选时为true；未全选但当前页所有行都选中时也为true
            checked={isAllSelected || (selectedRowIds.size === data.length && selectedRowIds.size > 0 && !isAllSelected)}
            onChange={(e) => {
              const newIsAllSelected = !isAllSelected;
              setIsAllSelected(newIsAllSelected);

              if (newIsAllSelected) {
                // 全选时将当前页所有行ID加入选中集合，若需真正全选所有页，可补充获取所有ID的逻辑
                const currentPageIds = data.map(row => row.original.id);
                setSelectedRowIds(new Set([...selectedRowIds, ...currentPageIds]));
              } else {
                // 取消全选时清空选中集合
                setSelectedRowIds(new Set());
              }
            }}
          />
        ),
        Cell: ({ row }) => (
          <input
            type="checkbox"
            checked={row.isSelected}
            onChange={() => {
              const newSelectedIds = new Set(selectedRowIds);
              // 切换当前行的选中状态
              if (newSelectedIds.has(row.original.id)) {
                newSelectedIds.delete(row.original.id);
              } else {
                newSelectedIds.add(row.original.id);
              }
              setSelectedRowIds(newSelectedIds);

              // 全选状态下取消某一行时，关闭全选标记
              if (isAllSelected) {
                setIsAllSelected(false);
              }
            }}
          />
        ),
      },
      ...columns,
    ]);
  }
);

3. 处理全选后的业务逻辑 #

如果需要对所有页面的行执行操作（如批量删除），可选择两种方案：

• 方案一：调用API获取所有行的ID，存入selectedRowIds集合（适合数据量不大的场景）
• 方案二：利用isAllSelected标记，提交时告知后端执行全量操作（比如给接口新增selectAll参数，由后端处理所有数据）

关键说明 #

• 自定义getIsRowSelected是核心，让React-Table能跨页面判断行的选中状态
• 表头全选复选框逻辑完全自定义，避免默认逻辑仅选中当前页的问题
• 切换分页时，只要isAllSelected为true，新页面的行会自动显示为选中状态

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