Paginate a List

XMLUI provides a Pagination component that can be used to display visual controls for the pagination feature, no matter whether it is handled inside or outside of a layout component requiring that feature.

The Table component provides out-of-the-box support for pagination, so you can access pagination options via the following properties: isPaginated, pageSize, pageSizeOptions, paginationControlsLocation.

<Table
  data="/api/endpoint"
  isPaginated
  pageSize="10"
  pageSizeOptions="{[5, 10, 20, 30]}"
  paginationControlsLocation="both"
>
    ...
</Table>

Other components, such as the List, can be hooked up with pagination using a DataSource combined with the Pagination component. This pattern works as a more generic solution where either the component does not have pagination implemented in the component itself, or you wish to use custom pagination logic.

In this case the DataSource component does the heavy lifting by querying the page index, the previous and next page IDs. This can be done using variables and query parameters.

<App
    var.pageSize="{5}"
    var.currentPage="{0}"
    var.before="{0}"
    var.after="{pageSize-1}"
  >
  <DataSource
    id="pagination_ds"
    url="/api/pagination_items/{before}/{after}"
    />
    <Text>
      Page {currentPage + 1}, showing items {before + 1}-{after + 1}
    </Text>
    <Pagination
      id="pagination"
      itemCount="20"
      pageSize="{pageSize}"
      pageIndex="{currentPage}"
      onPageDidChange="(page, size, total) => {
        currentPage = page;
        before = page * size;
        after = before + size - 1;
        pagination_ds.refetch();
      }"
      onPageSizeDidChange="(size) => {
        pageSize = size;
        before = currentPage * size;
        after = before + size - 1;
        pagination_ds.refetch();
      }"
    />
    <List data="{pagination_ds}" />
</App>

<App
    var.pageSize="{5}"
    var.currentPage="{0}"
    var.before="{0}"
    var.after="{pageSize-1}"
  >
  <DataSource
    id="pagination_ds"
    url="/api/pagination_items/{before}/{after}"
    />
    <Text>
      Page {currentPage + 1}, showing items {before + 1}-{after + 1}
    </Text>
    <Pagination
      id="pagination"
      itemCount="20"
      pageSize="{pageSize}"
      pageIndex="{currentPage}"
      onPageDidChange="(page, size, total) => {
        currentPage = page;
        before = page * size;
        after = before + size - 1;
        pagination_ds.refetch();
      }"
      onPageSizeDidChange="(size) => {
        pageSize = size;
        before = currentPage * size;
        after = before + size - 1;
        pagination_ds.refetch();
      }"
    />
    <List data="{pagination_ds}" />
</App>