Antd table rolling load data implementation

Create a div directly outside the Table component, using the scroll event onScrollCapture for that div

import React, { useState, useEffect } from 'react';
import { Table } from 'antd';
import api from 'api/api';

const ListPage = (props) = > {

  const [isMore, setIsMore] = useState(true); // Is there any data left
  const [page, setPage] = useState(1); / / page
  const [rows, setRows] = useState(10); // 10 entries per page
  const [total, setTotal] = useState(0); / / the total number of article
  const [dataSource, setDataSource] = useState([]); / / data

  let scrollRef;

  const getList = (page = 1) = > {
    api
      .list({ page, rows })
      .then((res) = > {
        const { data } = res.data;
        if (data) {
          const { total, rows } = data;
          setTotal(total);
          setDataSource(page == 1? rows : [...dataSource, ...rows]); }}); };const onScrollCapture = (e) = > {
    // scrollTop will have a decimal point that will cause the equation to fail
    if (
      Math.round(scrollRef.scrollTop) + scrollRef.clientHeight == scrollRef.scrollHeight
    ) {
      if (Math.ceil(total / rows) == page) {
        setIsMore(false);
        return false;
      }
      getList(page + 1);
      setPage(page + 1); }};const columns = [
    {
      title: 'number'.dataIndex: 'rownum'.key: 'rownum'.width: '15%'.render: (text, record, index) = > index + 1
    },
    {
      title: 'name'.dataIndex: 'name'.key: 'name'.width: '20%'
    },
    {
      title: 'Attending hospital'.dataIndex: 'orgName'.key: 'orgName'.width: '35%'
    },
    {
      title: 'Residential Address'.dataIndex: 'addr'.key: 'addr'.width: '30%'}];return (
    <div className="list-page">
      <ul className="table-header">
        {columns.map((item) => (
          <li style={{ width: item.width }} key={item.key}>
            {item.title}
          </li>
        ))}
      </ul>
      <div
        onScrollCapture={onScrollCapture}
        style={{ height: 320.overflowY: 'scroll'}}ref={(c)= > {
          scrollRef = c;
        }}
      >
        <Table
          columns={columns}
          dataSource={dataSource}
          size="small"
          pagination={false}
          rowKey="idNo"
        />{! isMore ?<div className="no-more">To the bottom</div> : null}
      </div>
    </div>
  );
};

export default ListPage;
Copy the code

Need to pay attention to two points: 1, in order to fix the header, direct control style hidden antD header handwritten; 2, scrollTop will have a decimal point, resulting in the equation is not valid, solution: round.