Pagination

Pagination provides horizontal navigation between chunks(pages) of a dataset.

Pagination

Use the default pagination when you need a simple pagination pattern for a page that will not change size.

Pagination includes several mechanisms to move between pages:

• Left arrow:
  • Navigates backward one page
  • Disabled when the first page is selected
• Numbers: redirects directly to a certain dataset chunk (page) calculated with the page size
• Ellipsis:
  • Appears when the number of pages exceeds six
  • Displays a dropdown menu with the rest of the pages
  • It is always shown in a middle position
• Right arrow:
  • Navigates forward one page
  • Disabled when the last page is selected

Pagination bar

A pagination bar is pagination with the following features:

• A page size selector placed on the left side of the bar
• A label on the right side of the page size selector that displays the exact chunk of information displayed from the dataset
• Classic pagination on the right side of the bar that adapts to the number of pages

Use the pagination bar when you need a complex pagination pattern that requires changing the page size and re-calculating the number of pages.

Description:

1. Entries dropdown to select the number of elements per page. You can configure the page size options.
2. Descriptive text to clarify the dataset segment shown.
3. Back arrow
4. Selected page
5. Non-selected page
6. Ellipsis to select intermediate pages through a dropdown menu. Since there are so many pages, it's impossible to view all the pages at once.
7. Forth arrow

Pagination bar mobile