Guidelines

Intro

The pagination component is specific to SAC and should only be used for table interfaces with more than 150 search results.

https://www.figma.com/design/3pnSbYmau9yyEpKr63q5cb/DNA-Web-UI-Kit?node-id=17325-17378&t=SQmE6dOvM9cGLrP8-11

When to Use

Use the pagination:

In tables with over 150 search results
When the user has a specific object they are searching for within the table
Pagination is currently SAC-specific – there has been extensive user research that has led to the decision of keeping this pattern

Don't

Don't use the pagination:

In process flows (ie. a wizard or icon tab bar component is more appropriate for this)
In small tables in dialogs
As a navigation control for the Carousel component
To replace Lazy Loading Pattern outside of this use case – Lazy Load should be the default pattern. Refer to the sap.ui.table.Table UI5 sample for an example
When there is only one page available

Top Tips

Use pagination components for table interfaces with more than 150 search results.
The first page, last page, and the page the user is currently on should always be shown.

Anatomy

Page Button: This is a text-only button that represents a specific page.
Truncation Page Button (optional): For tables with more than 5 pages, there should be a truncation button between the current and first/last page button that indicates there are more than 5 pages.
File Count (optional): This shows the amount and location of the files currently shown within the page along with the total number of files in the search results.
Back/Next Buttons: These buttons allow users to incrementally go back and forth between pages in increments of 1.
First/Last Buttons: These buttons allow the user to go to either the first or last page out of all of the search results.
Page Input (optional): The page input allows users to manually input a specific page number and jump to it immediately.

Pagination - Anatomy

Behavior and Interaction

The outer arrow buttons (ie. double arrow buttons) in the pagination component allows users to navigate to the very first (left) or last (right) page of search results.

Two-state interaction diagram showing the First Page («) button being clicked. Before (top): page 3 is active across 5 pages, displaying "301 – 450 of 750 files", with a cursor and "click" label on the First Page button. After (bottom): page 1 becomes active, displaying "1 – 150 of 750 files".

Pagination using First Page Button

Two-state interaction diagram showing the Last Page (») button being clicked. Before (top): page 3 is active across 5 pages, displaying "301 – 450 of 750 files", with a cursor and "click" label on the Last Page button. After (bottom): page 5 becomes active, displaying "601 – 750 of 750 files".

Pagination using Last Page Button

The inner arrow buttons (ie. single arrow buttons) in the pagination component allows users to navigate back and forth between pages in increments of one page at a time.

Two-state interaction diagram showing the Back Page (‹) button being clicked. Before (top): page 3 is active, showing pages 1 2 3 4 5 with a cursor and "click" label on the Back button, displaying "300 – 450 of 1500 files". After (bottom): page 2 becomes active, showing pages 1 2 3 4 5 and updating the range to "150 – 300 of 1500 files".

Pagination using Back Page Button

Two-state interaction diagram showing the Next Page (›) button being clicked. Before (top): page 3 is active across 5 pages, displaying "300 – 450 of 1500 files", with a cursor and "click" label on the Next button. After (bottom): page 4 becomes active, displaying "451 – 600 of 1500 files".

Pagination using Next Page Button

The Input control beside the page button group allows users to manually input page numbers. Once page number is entered into the Input control and the user hits the ‘Enter’ key, this would take the user directly to the desired page number. Error validation is included within the page input (ie. negative numbers and numbers outside of the number of pages are not allowed).

Two-state interaction diagram showing direct page navigation via the Page input field. Before (top): page 3 is active, showing pages 1 2 … 10 with the Page input focused and containing the value "9". After (bottom): page 9 becomes active, showing pages 1 … 8 9 10 with the range updated to "1201 – 1350 of 1500 files".

Pagination using Page Input

Two-state interaction diagram showing error validation on the Page input field. Before (top): page 3 is active, the Page input is focused and contains the out-of-range value "11". After (bottom): the page does not change (still page 3), the Page input turns red, and an error tooltip reads "Please select a valid page number."

Pagination using Page Input w/ Error Validation

One-Page Pagination

When there is only one page, the pagination component should be hidden.

Truncation

When there are numerous pages (ie. >5 pages), use truncation to indicate that there are more pages and also avoid unnecessarily long pagination panels. This allows the pagination component to be limited to 5 page buttons at a time. As a rule of thumb, the first, last, and current pages should always be shown.

When the user is on the first 3 pages, only show truncation before the last page button:

Pagination component displaying page 3 of 10 while the user is near the beginning of the page range. Visible pages are 1, 2, 3 (active), an ellipsis, and 10. The item range reads "301 – 450 of 1500 files" and the Page input shows 3.

Truncation within Pagination when user is at the beginning

When the user is on the last 3 pages, only show truncation after the first page button:

Pagination component displaying page 8 of 10 while the user is near the end of the page range. Visible pages are 1, an ellipsis, 8 (active), 9, and 10. The item range reads "1051 – 1200 of 1500 files" and the Page input shows 8.

Truncation within Pagination when user is at the end

When the user is in the middle, show truncation after the first page button and before the last page button:

Pagination component displaying page 6 of 10 while the user is in the middle of the page range. Visible pages are 1, an ellipsis, 6 (active), an ellipsis, and 10. The item range reads "751 – 900 of 1500 files" and the Page input shows 6.