Pagination

Primitive UI components in Search UI Components package, are headless, building blocks used to create the headless widget templates for React applications. You can use them to scaffold your custom widgets.

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

Anatomy

For a complete implementation, put together parts of the UI component as shown in the following code block.

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

In your React application, paste the following code block then modify the primitives to match your needs.

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

In your React application, paste the following code block then modify the primitives to match your needs.

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!