Skip to main content

Pagination

tip

Pagination is fully controlled. You can define the states needed to handle interactions, such as changing current page and number of items per page.

Basic​

Pagination can only be used with navigation buttons between pages.

With summary​

Use the renderSummary property to show a summary of items along with the navigation. This property can receive a string containing specific keys, which will be replaced by the final value of each one.

The keys available are:

  • {total}: Total paginated items
  • {pageSize}: Number of items per page
  • {currentPage}: Current page
  • {firstPageItemIndex}: Index of the first item on the current page
  • {lastPageItemIndex}: Index of the last item on the current page

For example:

Page size selection​

Use the renderSummary property by declaring a function to get the PageSizeSelect subcomponent and pagination information through the available parameters. For more details go to our Component API tab.

It is also possible to pass custom options to PageSizeSelect via the pageSizeSelectOptions property.

onChange event​

To handle component change events, the onChange property expects a callback that supports the following parameters in this order:

  1. The object of the triggered event
  2. The value of the current page
  3. General information about the component, such as number of items per page and reason for a change

For more details visit our Component API tab.

Hidden navigation​

Use the hideNavigation property to hide the navigation and display only the summary.

Internationalization​

It is possible to pass custom values for the different texts used internally by the component. Are they:

  • previousLabel: Text for back to previous page button
  • nextLabel: Text for the next page button
  • pageSizeSelectLabel: Text to label the PageSizeSelect subcomponent. This text is not displayed but is important for accessibility issues

To help with this process, constants are available with default values for English, Portuguese and Spanish. For more details go to our Component API tab.

Example of using constants for Portuguese:

Using with react-i18next​

When using renderSummary with the PageSizeSelect subcomponent, use the Trans component.

Example:

import { Trans } from 'react-i18next';

const ExampleUsingTrans = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  const handleChange = (_, page, { pageSize }) => {
    setPageSize(pageSize);
    setCurrentPage(page);
  };

  return (
    <Pagination
      total={100}
      pageSize={pageSize}
      currentPage={currentPage}
      onChange={handleChange}
      renderSummary={({ pageSize, total, PageSizeSelect }) => (
        <Trans
          i18nKey="myKey"
          values={{ pageSize, total }}
          components={{ select: <PageSizeSelect /> }}
        />
      )}
    />
  );
};

When using renderSummary as text only, use the t hook function useTranslation, passing the variables.

import { useTranslation } from 'react-i18next';

const ExampleUsingT = () => {
  const { t } = useTranslation();
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  const handleChange = (_, page, { pageSize }) => {
    setPageSize(pageSize);
    setCurrentPage(page);
  };

  return (
    <Pagination
      total={100}
      pageSize={pageSize}
      currentPage={currentPage}
      onChange={handleChange}
      renderSummary={({ pageSize, total }) => t('myKey', { pageSize, total })}
    />
  );
};

Feedback​