Pagination

Import

import { Pagination } from '@contentful/f36-components';
// or
import { Pagination } from '@contentful/f36-pagination';

Examples

Basic

When not using the total prop, it's necessary to pass to the component the isLastPage and the pageLength prop, so the Pagination component can render correctly.

Hide code
function PaginationExample() {
  const [page, setPage] = useState(0);
  // isLastPage needs to be set to hide Next Button
  const isLastPage = page > 3;

  return (
    <Pagination
      activePage={page}
      onPageChange={setPage}
      itemsPerPage={10}
      isLastPage={isLastPage}
    />
  );
}
function PaginationExample() {
  const [page, setPage] = useState(0);
  // isLastPage needs to be set to hide Next Button
  const isLastPage = page > 3;

  return (
    <Pagination
      activePage={page}
      onPageChange={setPage}
      itemsPerPage={10}
      isLastPage={isLastPage}
    />
  );
}
Open in Playground

With total number of items

When you know how many items in total there will be paginated on, you should pass that prop and the Pagination component will make all the calculations.

Hide code
function PaginationWithTotalExample() {
  const [page, setPage] = useState(0);

  return (
    <Pagination
      activePage={page}
      onPageChange={setPage}
      itemsPerPage={20}
      totalItems={113}
    />
  );
}
function PaginationWithTotalExample() {
  const [page, setPage] = useState(0);

  return (
    <Pagination
      activePage={page}
      onPageChange={setPage}
      itemsPerPage={20}
      totalItems={113}
    />
  );
}
Open in Playground

With view per page selector

Hide code
function PaginationWithViewPerPageSelector() {
  const [page, setPage] = useState(0);
  const [itemsPerPage, setItemsPerPage] = useState(20);
  // isLastPage needs to be set to hide Next Button
  const isLastPage = (page + 1) * itemsPerPage >= 120;
  // Only so example is rendered with fewer items on last page.
  const pageLength = isLastPage ? 18 : undefined;

  const handleViewPerPageChange = (i) => {
    // Reset page to match item being shown on new View per page
    setPage(Math.floor((itemsPerPage * page + 1) / i));
    setItemsPerPage(i);
  };

  return (
    <Pagination
      activePage={page}
      onPageChange={setPage}
      isLastPage={isLastPage}
      showViewPerPage
      viewPerPageOptions={[20, 50, 100]}
      itemsPerPage={itemsPerPage}
      onViewPerPageChange={handleViewPerPageChange}
      pageLength={pageLength}
    />
  );
}
function PaginationWithViewPerPageSelector() {
  const [page, setPage] = useState(0);
  const [itemsPerPage, setItemsPerPage] = useState(20);
  // isLastPage needs to be set to hide Next Button
  const isLastPage = (page + 1) * itemsPerPage >= 120;
  // Only so example is rendered with fewer items on last page.
  const pageLength = isLastPage ? 18 : undefined;

  const handleViewPerPageChange = (i) => {
    // Reset page to match item being shown on new View per page
    setPage(Math.floor((itemsPerPage * page + 1) / i));
    setItemsPerPage(i);
  };

  return (
    <Pagination
      activePage={page}
      onPageChange={setPage}
      isLastPage={isLastPage}
      showViewPerPage
      viewPerPageOptions={[20, 50, 100]}
      itemsPerPage={itemsPerPage}
      onViewPerPageChange={handleViewPerPageChange}
      pageLength={pageLength}
    />
  );
}
Open in Playground

With total and view per page selector

Hide code
function PaginationWithTotalAndViewPerPageExample() {
  const [page, setPage] = useState(0);
  const [itemsPerPage, setItemsPerPage] = useState(20);

  const handleViewPerPageChange = (i) => {
    // Reset page to match item being shown on new View per page
    setPage(Math.floor((itemsPerPage * page + 1) / i));
    setItemsPerPage(i);
  };

  return (
    <Pagination
      activePage={page}
      onPageChange={setPage}
      totalItems={113}
      showViewPerPage
      viewPerPageOptions={[20, 50, 100]}
      itemsPerPage={itemsPerPage}
      onViewPerPageChange={handleViewPerPageChange}
    />
  );
}
function PaginationWithTotalAndViewPerPageExample() {
  const [page, setPage] = useState(0);
  const [itemsPerPage, setItemsPerPage] = useState(20);

  const handleViewPerPageChange = (i) => {
    // Reset page to match item being shown on new View per page
    setPage(Math.floor((itemsPerPage * page + 1) / i));
    setItemsPerPage(i);
  };

  return (
    <Pagination
      activePage={page}
      onPageChange={setPage}
      totalItems={113}
      showViewPerPage
      viewPerPageOptions={[20, 50, 100]}
      itemsPerPage={itemsPerPage}
      onViewPerPageChange={handleViewPerPageChange}
    />
  );
}
Open in Playground

Content guidelines

• onPageChange prop must update the list displayed to the user based on the page navigated to.

Accessibility

• All the necessary a11y attributes are provided for the pagination elements.
• Pass an aria-label to the Pagination to give more context to screen readers.