[Feature Request]: Support for cases where `pagesCount` cannot be set in `Pagination` component about components

[timogasda]

Hello,
if you cannot determine your number of pages (pagesCount) from the beginning, you can use open-ended pagination with the openEnd property of Pagination, see the open-ended pagination example. You can also find some usage guidelines in the pagination article: https://cloudscape.design/components/pagination/?tabId=usage.

In practice, you can combine the utilities from our collection hooks with the openEnd property.

Let's imagine you have a custom hook that handles your data fetching from the server and tells you when you have reached the end of your collection (called useData). This could look something like this:

function OpenEndedPagination() {
  const [pageIndex, setPageIndex] = useState(1);

  const { items: allItems, hasMoreData } = useData(pageIndex);

  const { collectionProps, paginationProps, items } = useCollection(allItems, {
    pagination: { pageSize: PAGE_SIZE }
  });

  return <Pagination
    {...paginationProps}
    openEnd={hasMoreData}
    onNextPageClick={({ detail: { requestedPageIndex } }) => {
      setPageIndex(requestedPageIndex);
    }}
  />
}

Full example: https://codesandbox.io/s/fervent-water-plebul?file=/src/App.js

Hope that helps! :)

[rktyt]

Thanks!
I assumed that the pagesCount property was not available in this case because it was a required field.