Pagination

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

Pagination uses the total number of pages you pass to it to render all pages in the range, automatically truncating the display 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 respond to user navigation with an onChange event handler. Note that the returned page values match the rendered page number, so the 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 afterward.

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

If you want manual control over the component's state, you can use the page property. By utilizing the page property, you have full control over the component's value and prevent automatic handling. 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"
/>