wix-style-react/src/Table/docs/examples/14_TableInfiniteScrollExample.js

wix-style-react

/* eslint-disable */

() => {
  const containerRef = React.useRef(null);
  const [data, setData] = React.useState([]);
  const [container, setContainer] = React.useState(null);

  const fetchMoreData = () =>
    Promise.resolve(fetch(`/api/table?limit=${5}&offset=${data.length}`))
      .then(results => {
        setData([...data, ...results]);
      })

  React.useEffect(() => {
    setContainer(containerRef);
    fetchMoreData();
  }, []);

  const columns = [
    { title: 'First', render: row => row.firstName },
    { title: 'Last', render: row => row.lastName },
  ];

  return (
    <div ref={containerRef} style={{ maxHeight: '258px', overflow: 'auto' }}>
      <Table
        infiniteScroll
        hasMore={true}
        loadMore={fetchMoreData}
        itemsPerPage={20}
        scrollElement={container && container.current}
        data={data}
        columns={columns}
      >
        <Table.Content />
      </Table>
    </div>
  );
};