t.js

import React, {useEffect, useState} from 'react'
import {FixedSizeList} from 'react-window'
import {Table} from 'antd';
// https://jsonplaceholder.typicode.com/posts?_page=1&_limit=10
import 'antd/dist/antd.css'


const columns = [
  {
    title: 'User ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: 'Title',
    dataIndex: 'title',
    key: 'title',
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];
const PaginationTable = ({data, setPage, page, setLimit, limit, isLoading}) => {

  const paginationConfig = {
    onChange: (page, limit) => {
      setPage(page)
      setLimit(limit)
    },
    current: page,
    pageSize: limit,
    total: 100,
    showTotal: (total, range) => `Total: ${total}`,
    position: ['none', 'bottomRight']

  }

  return (
    <div>
      <Table
        columns={columns}
        pagination={paginationConfig}
        dataSource={data}
        loading={isLoading}

      />
    </div>
  );
}


const VirtualizedList = ({items, onScroll}) => {
  const Row = ({index, style}) => {
    const post = items[index]
    return <div style={style}>row #{post && post.id}</div>
  }
  return <FixedSizeList itemSize={35} itemCount={300} height={300} onScroll={onScroll}>{Row}</FixedSizeList>
}

export const App = () => {
  const [posts, setPosts] = useState([])
  const [page, setPage] = useState(1)
  const [limit, setLimit] = useState(10)
  const [isLoading, setLoading] = useState(false)


  useEffect(() => {

    setLoading(true)
    fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=${limit}`)
      .then(res => res.json())
      .then(posts => {
        setPosts(posts)
        setLoading(false)
      })
  }, [page, limit])


  // const handleScroll = ({scrollOffset, scrollUpdateWasRequested}) => {
  //   // console.log(scrollOffset)
  //   console.log(scrollUpdateWasRequested)
  // }
  //
  //
  // return <VirtualizedList items={posts} onScroll={handleScroll}/>

  return <PaginationTable
    data={posts}
    setPage={setPage}
    page={page}
    setLimit={setLimit}
    isLoading={isLoading}
  />
}