Ant Design Table 是否支持同时在顶部和底部展示分页组件？

完全可以实现，Antd官方已经提供了原生支持，也可以根据定制需求做自定义开发，两种可行方案如下：

方案1：使用Table内置配置（推荐，无需额外逻辑） #

Antd 4.x及以上版本的Table组件的pagination配置项原生支持多位置渲染，只需要给position字段传入两个位置值，就可以同时在表格顶部和底部渲染分页组件，两个分页默认完全同步，不需要额外写状态管理代码。

示例代码：

import { Table } from 'antd';

const DemoTable = () => {
  // 你的表格列配置
  const columns = [];
  // 你的表格数据源
  const dataSource = [];

  return (
    <Table
      columns={columns}
      dataSource={dataSource}
      rowKey="id"
      pagination={{
        // 配置顶部右侧、底部右侧同时显示分页，也可以根据需求调整位置
        position: ['topRight', 'bottomRight'],
        total: 200,
        pageSize: 10,
        showSizeChanger: true,
        showTotal: (total) => `共 ${total} 条数据`,
        // 其余所有分页配置都可以正常使用，上下分页同步生效
      }}
      // 其他Table配置，比如固定表头滚动等都兼容
      scroll={{ y: 700 }}
    />
  );
};

方案2：自定义分页组件（适合需要个性化布局的场景） #

如果你需要对顶部分页的样式、布局做特殊定制，官方内置配置满足不了需求，可以单独引入Antd的Pagination组件放在表格上方，统一管理分页状态即可实现同步。

示例代码：

import { useState } from 'react';
import { Table, Pagination } from 'antd';

const DemoTable = () => {
  const columns = [];
  const dataSource = [];
  // 统一维护分页状态
  const [paginationConfig, setPaginationConfig] = useState({
    current: 1,
    pageSize: 10,
    total: 200,
  });

  // 分页变更的统一处理逻辑
  const handlePageChange = (newPage, newPageSize) => {
    setPaginationConfig(prev => ({
      ...prev,
      current: newPage,
      pageSize: newPageSize,
    }));
    // 此处可新增分页查询接口请求逻辑
  };

  return (
    <div className="table-wrapper">
      {/* 顶部自定义分页，可以自由调整样式、布局、配置项 */}
      <Pagination
        {...paginationConfig}
        onChange={handlePageChange}
        showSizeChanger
        style={{ marginBottom: 16, textAlign: 'right' }}
      />
      <Table
        columns={columns}
        dataSource={dataSource}
        rowKey="id"
        pagination={{
          ...paginationConfig,
          onChange: handlePageChange,
        }}
        scroll={{ y: 700 }}
      />
    </div>
  );
};

注意事项 #

• 两种方案都可以完美适配表格固定滚动、大数据量虚拟滚动等场景，不存在兼容性问题
• 若不需要上下分页完全一致的配置，可以分别给两个位置的分页单独传参数，比如顶部只显示页码切换，底部显示总数和每页条数切换

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