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:

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

General construction

All buttons used in the pager component are ghost buttons. The pager is always positioned below the content it belongs to.

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 drop-down menu. The drop-down menu contains predefined options for showing different quantities of items per 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

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 MindSphere 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 used in the component:

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 used in the component:

Name State Font-family Font-size Line-height Text-align
Simple pager – all page numbers, ellipsis all Siemens Sans Roman 14px 16px center
Advanced pager – Page information all Siemens Sans Roman 14px 16px left
Advanced pager – Items per page all Siemens Sans Roman 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