antd table scroll to top when click Pagination

Question

This is my table code in AntD, on pagination clicked

<Table
        columns={fixedColumns}
        dataSource={fixedData}
        pagination={false}
        scroll={{ x: 2000, y: 500 }}
        bordered
        summary={() => (
          <Table.Summary fixed>
            <Table.Summary.Row>
              <Table.Summary.Cell index={0}>Summary</Table.Summary.Cell>
              <Table.Summary.Cell index={1}>
                This is a summary content
              </Table.Summary.Cell>
            </Table.Summary.Row>
          </Table.Summary>
        )}
      />

I want it to scroll to page top.

Answer 1

Check the following code to scroll to the top of the page.

const handleChangePage = () => {
  window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
};

In the above code, I have used the window.scrollTo method to scroll to the top of the page when the pagination is clicked. The handlePaginationChange function is passed to the onChange prop of the AntD Table component to handle pagination changes.

Please check the following code. This is the same code that you have added to Codesandbox, but with the scrolling issue fixed.

App.tsx

import React from "react";
import "./index.css";
import { Table, Typography, Pagination } from "antd";
import type { ColumnsType } from "antd/es/table";

const { Text } = Typography;

interface DataType {
  key: string;
  name: string;
  borrow: number;
  repayment: number;
}

interface FixedDataType {
  key: React.Key;
  name: string;
  description: string;
}

const columns: ColumnsType<DataType> = [
  {
    title: "Name",
    dataIndex: "name"
  },
  {
    title: "Borrow",
    dataIndex: "borrow"
  },
  {
    title: "Repayment",
    dataIndex: "repayment"
  }
];

const data: DataType[] = [
  {
    key: "1",
    name: "John Brown",
    borrow: 10,
    repayment: 33
  },
  {
    key: "2",
    name: "Jim Green",
    borrow: 100,
    repayment: 0
  },
  {
    key: "3",
    name: "Joe Black",
    borrow: 10,
    repayment: 10
  },
  {
    key: "4",
    name: "Jim Red",
    borrow: 75,
    repayment: 45
  }
];

const fixedColumns: ColumnsType<FixedDataType> = [
  {
    title: "Name",
    dataIndex: "name",
    fixed: true,
    width: 100
  },
  {
    title: "Description",
    dataIndex: "description"
  }
];

const fixedData: FixedDataType[] = [];
for (let i = 0; i < 100; i += 1) {
  fixedData.push({
    key: i,
    name: ["Light", "Bamboo", "Little"][i % 3],
    description: "Everything that has a beginning, has an end."
  });
}

const App: React.FC = () => {
  
  const handleChangePage = () => {
    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
  };

  return (
    <>
      <Table
        columns={columns}
        dataSource={data}
        pagination={false}
        bordered
        summary={(pageData) => {
          let totalBorrow = 0;
          let totalRepayment = 0;

          pageData.forEach(({ borrow, repayment }) => {
            totalBorrow += borrow;
            totalRepayment += repayment;
          });

          return (
            <>
              <Table.Summary.Row>
                <Table.Summary.Cell index={0}>Total</Table.Summary.Cell>
                <Table.Summary.Cell index={1}>
                  <Text type="danger">{totalBorrow}</Text>
                </Table.Summary.Cell>
                <Table.Summary.Cell index={2}>
                  <Text>{totalRepayment}</Text>
                </Table.Summary.Cell>
              </Table.Summary.Row>
              <Table.Summary.Row>
                <Table.Summary.Cell index={0}>Balance</Table.Summary.Cell>
                <Table.Summary.Cell index={1} colSpan={2}>
                  <Text type="danger">{totalBorrow - totalRepayment}</Text>
                </Table.Summary.Cell>
              </Table.Summary.Row>
            </>
          );
        }}
      />

      <br />

      <Table
        columns={fixedColumns}
        dataSource={fixedData}
        pagination={false}
        scroll={{ x: 2000, y: 500 }}
        bordered
        summary={() => (
          <Table.Summary fixed>
            <Table.Summary.Row>
              <Table.Summary.Cell index={0}>Summary</Table.Summary.Cell>
              <Table.Summary.Cell index={1}>
                This is a summary content
              </Table.Summary.Cell>
            </Table.Summary.Row>
          </Table.Summary>
        )}
      />
      <Pagination
        onChange={handleChangePage}
        pageSize={15}
        total={fixedData.length}
      />
    </>
  );
};

export default App;

Output: