Pagination

<Pagination total={10} previousAriaLabel="Previous page" nextAriaLabel="Next page" />

Pagination uses the total amount of pages you pass to it to render all pages in the range and automatically truncate the rendering based on the currently selected page. It also requires you to pass aria-labels for the previous/next button controls and, optionally, aria labels for each individual page.

You can react to the user navigation with an onChange event handler. Note that returned page values match the rendered page number, so their count starts from 1.

<Pagination
  total={10}
  previousAriaLabel="Previous page"
  nextAriaLabel="Next page"
  pageAriaLabel={(args) => `Page ${args.page}`}
  onChange={(args) => console.log(`Navigated to page ${args.page}`)}
/>

Similar to using native inputs in React, Pagination component can be used as either a controlled or uncontrolled component. By default, Pagination is uncontrolled, allowing you to set the initial selected page using the defaultPage property. In this case, all change events are handled automatically by the component. This approach is useful when you want to populate the default value from a data source but don't need manual control over it afterward.

<Pagination
  total={10}
  defaultPage={5}
  previousAriaLabel="Previous page"
  nextAriaLabel="Next page"
/>

If you want to have manual control over the state of the component, you can make use of the page property. By utilizing the page property, you have full control over the component's value and prevent automatic handling of the value. You will be responsible for updating the state using the onChange handler, allowing you to incorporate custom logic before the state is updated.

<Pagination
  total={10}
  page={5}
  previousAriaLabel="Previous page"
  nextAriaLabel="Next page"
/>