Pagination

This topic describes the anatomy, API reference, and variations of the Pagination primitive component.

Anatomy

import { Pagination } from '@sitecore-search/ui';

const MyPaginationComponent = () => (
  <Pagination.Root>
        <Pagination.PrevPage>«</Pagination.PrevPage>
        <Pagination.Pages>
            <Pagination.Page>1</Pagination.Page>
            ...
            <Pagination.Page>N</Pagination.Page>
        </Pagination.Pages>
        <Pagination.NextPage>»</Pagination.NextPage>
        <Pagination.FirstPage>Go to first page</Pagination.FirstPage>
        <Pagination.LastPage>Go to last page</Pagination.LastPage>
      </Pagination.Root>
);

Using the component

The following tabs describe use of the Pagination primitive component.

Controlled pagination

Screenshot of a controlled primitive component.

({ currentPage, totalPages, onPageChange, href, defaultCurrentPage }) => {
  return (
    <PaginationRootStyled
      currentPage={currentPage}
      defaultCurrentPage={defaultCurrentPage}
      totalPages={totalPages}
      onPageChange={onPageChange}
      href={href}
    >
      <div
        style={{
          display: 'flex',
          marginBottom: 10,
        }}
      >
        <PaginationPrevPageStyled onClick={onClick}>
          <ArrowLeftIcon />
        </PaginationPrevPageStyled>

        <PaginationPagesStyled>
          {({ pages }) =>
            pages.map(({ page }) => (
              <PaginationPageStyled key={page} aria-label={`Page ${page}`} page={page} onClick={onClick}>
                {page}
              </PaginationPageStyled>
            ))
          }
        </PaginationPagesStyled>

        <PaginationNextPageStyled onClick={onClick}>
          <ArrowRightIcon />
        </PaginationNextPageStyled>
      </div>

      <div>
        <PaginationFirstPageStyled onClick={onClick}>
          {(page) => `Go to first page (${page})`}
        </PaginationFirstPageStyled>
        <PaginationLastPageStyled onClick={onClick}>{(page) => `Go to last page (${page})`}</PaginationLastPageStyled>
      </div>
    </PaginationRootStyled>
  );
}

Uncontrolled pagination

Screenshot of an uncontrolled primitive component.

(props) => {
  const [currentPage, setPage] = useState(props.currentPage);
  useEffect(() => {
    setPage(props.currentPage);
  }, [props.currentPage]);
  return (
    <Template
      {...props}
      currentPage={currentPage}
      onPageChange={(page) => {
        setPage(page);
        props.onPageChange(page);
      }}
    />
  );
}

API reference

This section describes the component or component parts displayed in the anatomy structure. For every component, you will find:

Components to which you can add it as a child.
Components you can add as its child.
Details of any properties you can set.

Pagination.Root

The Pagination.Root component wraps all the parts for the pagination component.

Children: Pagination.Pages, Pagination.PrevPage, Pagination.NextPage, Pagination.FirstPage, and Pagination.LastPage

Name	Description
`totalPages`	The amount of pages of the pagination component.
`currentPage`	Current page value
`defaultCurrentPage`	Default selected page value.
`onPageChange`	A callback that fires when the page value changes.
`href`	An optional callback to handle when a click on a page number happens.
`children`	The children of the `Root` component

Pagination.Pages

The Pagination.Pages component wraps all the pages.

Parent: Pagination.Root

Children: Pagination.Page

Name	Description
`children`	The children of the component

Pagination.Page

The Pagination.Page component is a page number link.

Parent: Pagination.Pages

Name	Description
`page`	The page number for the link.
`children`	The children of the component

Pagination.PrevPage

The Pagination.PrevPage component handles the previous page click.

Parent: Pagination.Root

Name	Description
`onClick`	An optional callback to handle when a click happens.
`children`	The children of the component

Pagination.NextPage

The Pagination.NextPage component handles the previous page click.

Name	Description
`onClick`	An optional callback to handle when a click happens.
`children`	The children of the component

Pagination.FirstPage

The Pagination.FirstPage component is link that redirects to the first page.

Parent: Pagination.Root

Name	Description
`children`	The children of the component

Pagination.LastPage

The Pagination.LastPage component is link that redirects to the last page.

Parent: Pagination.Root

Name	Description
`children`	The children of the component

If you have suggestions for improving this article, let us know!