Pagination
About
Pagination allows users to navigate easy and fast through a bunch of results, often showcased in a Table or List.
Anatomy
A Pagination can be composed of:
- Page buttons (mandatory);
- Back/next page steppers;
- First and last page steppers;
- Truncation indicator(s);
- Result label and select field.
When to use
A Pagination can be used in combination with a Table or a List that is by default (without sorting or filtering) using 2 or more pages to showcase its results.
When not to use
- When by default the results are showcases just on 1 page;
- When infinite scroll is applied;
- When you want to navigate users through several pages. Consider another way of navigation instead (e.g., Panel with Nav items, Tabs).
- When you want to show the progress of a process (e.g., onboarding process). Instead, consider a Stepper.
Placement
On big screens the recommendation is to use a Pagination below a Table or List, centre-aligned.
Size
The Pagination component can grow from and to 3 different size variations: Minimised, Standard, Maximised.
Minimized
- 10 or less page numbers are shown in total;
- Back and next steppers are not shown, because users will be able to click each page individually.
Standard
- 9 page numbers are shown in total, indicating there are 11+ pages;
- There is one or are two truncation indicators shown (“…”) indicating that the page sequence is truncated;
- Back and next steppers are added.
Maximized
- 9 page numbers are shown indicating 20+ pages;
- Truncation indicators and back and next steppers added as well, just like in the standard size variation;
- First- and last page steppers are added.
Results line and select field
When your Table or List often has a high number of pages, we recommend to add the line that communicates the number of results per page and the related select field.
Behaviour
Select field
- The select field allows to select 5 up to 100 results per page. You can set a default select item that is activated.
- The drop down by default drops down. However, you can also choose to show users the select items in a ‘drop up’.
Results line
The results line has two variables. One for the range or results visible, and one for the number of total results. See ‘Content’ for the translations in Dutch, German, Swedish, French, Finnish, Norwegian and Danish for both of them.
Keyboard
Users are able to navigate through the page buttons using the Left and Right arrows, and activate the steppers by using the Enter key. Also, they can select an item in the select field.
Content
Languages
For both the result line and the Select field, there are the following languages built-in to the Pagination:
English
- Showing 1-10 of 112 results
- 10/page
Dutch
- 1-10 van de 112 resultaten
- 10/pagina
German
- Anzeige von 1-10 von 112 Ergebnissen
- 10/Seite
Swedish
- Visar 1-10 av 112 resultat
- 10/sida
French
- Affichage de 1 à 10 sur 112 résultats
- 10/page
Finnish
- Näytetään 1-10/112
- 10/sivu
Norwegian
- Viser 1-10 av 112 resultater
- 10/side
Danish
- Viser 1-10 af 112 resultater
- 10/side
The word ‘results’ and its translations can be used for almost all use cases and therefore is the prefered wording to keep the Pagination component consistent.
Nesting components
A Pagination can use:
- Icon
A Pagination can be used in:
- Table pattern
Resources
Events
| Component | Event | Description | Details |
|---|---|---|---|
<r-pagination /> | rChange | Occurs when active state of pagination list elements changes. |
|
rNumberClick | Emitted when one of the pagination numbers clicked. | ||
rArrowClick | Emitted when one of the pagination arrows clicked. |
|