Pager

A pager makes it possible to switch between comprehensible subsets of large amounts of data.

Usage

When to use

Use a pager in the following cases:

  • For tables with large ordered data sets.
  • When it is unsuitable to display all data on a single page.

Types

There are the following pager types:

Simple pager

The simple pager is recommended as standard pager.

pager-usage-behavior
1. First page example, 2. Current page example, 3. Last page example

Advanced pager

For lists and tables with large data sets, use the advanced pager for better readability.

pager-usage-types-advanced-pager
Advanced pager with page six as current page

General construction

All buttons used in the pager component are ghost buttons.

Simple pager

A simple pager consists of the following elements:

pager-usage-construction-simple-pager
1. Previous page button, 2. First page button, 3. Ellipsis, 4. Current page button, 5. Last page button, 6. Next page button

1. Previous page button
  • The previous page button is visible if the current page is not the first page.
2. First page button
  • The first page button is always visible.
3. Ellipsis
  • The ellipsis is visible if there are more than five pages in total.
4. Current page button
  • The current page button shows the number of the currently viewed page.
5. Last page button
  • The last page button is always visible and shows the total number of pages.
6. Next page button
  • The next page button is visible if the current page is not the last page.

Advanced pager

An advanced pager consists of the following elements:

pager-usage-construction-advanced-pager
1. Previous page button, 2. Current page input, 3. Next page button, 4. Page information, 5. Items per page

1. Previous page button
  • The previous page button is visible if the current page is not the first page.
2. Current page input
  • This numeric input shows the current page.
3. Next page button
  • The next page button is visible if the current page is not the last page.
4. Page information
  • The page information is showing the current and total page number.
5. Items per page
  • Consists of a label and a select.
  • The select menu contains predefined options for showing different quantities of items per page.

Behavior

Placement

The pager is placed in the main region. It is always positioned below the content it belongs to.

Do’s & Don’ts

pager-usage-do

pager-usage-dont

  • Use a pager to allow navigation to different pages of a large dataset.
  • Don’t use a pager when all data is shown on a single page.

Style

This chapter shows several pager styles in the design system.

Overview

pager-style-simple-pager-less-pages
Simple pager with less than six pages

pager-style-overview-simple-pager-ellipsis
Simple pager with one ellipsis

pager-style-overview-simple-pager
Simple pager with two ellipses

pager-style-overview-advanced-pager-first-page
Advanced pager with first page as current page

pager-style-overview-advanced-pager
Advanced pager with page six as current page

Color

The following table gives reference to the different colors and shades:

Name State Property Color name
Simple pager – Previous page button, Next page button, all page buttons all Foreground color Same as ghost button
Advanced pager – Previous page button, Next page button all Foreground color Same as ghost button
Advanced pager – Page information, Items per page all Foreground color Gray 400

Typography

The following table gives reference to the different font sizes and weights:

Name State Font-family Font-size Line-height Text-align
Simple pager – all page numbers, ellipsis all Siemens Sans Regular 14px 16px center
Advanced pager – Page information all Siemens Sans Regular 14px 16px left
Advanced pager – Items per page all Siemens Sans Regular 14px 16px right

Sizing and spacing

The following measurements show the dimensions for this component:

Simple pager

The width of the page buttons is responsive to the button content (minimum 32px).

pager-style-sizing-simple-pager
Sizing for simple pager

pager-style-spacing-simple-pager
Spacing for simple pager

Advanced pager

pager-style-sizing-advanced-pager
Sizing for advanced pager

pager-style-spacing-advanced-pager
Spacing for advanced pager

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top