wix-style-react/src/Table/docs/examples/15_TableInfiniteScrollAndBulkSelection.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 },
  ];

  const renderToolbar = selectionContext => {
    return (
      <TableToolbar>
        <TableToolbar.ItemGroup position="start">
          <TableToolbar.Item>
            <TableToolbar.SelectedCount>{`${selectionContext.selectedCount} Selected`}</TableToolbar.SelectedCount>
          </TableToolbar.Item>
        </TableToolbar.ItemGroup>
      </TableToolbar>
    );
  };

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