Responsive Table – Content Formatting Cheat Sheet

Intro

A table often implies a “boring” layout. It contains plain text, one value per cell, and fails to catch the user’s attention. In contrast, the responsive table is much more flexible and eye-catching. It also contains many options for formatting the table content. Due to small screen widths on mobile devices, these options are necessary in order to reduce the number of visible columns.

This cheat sheet shows you how you can transform a plain table into the cutting edge style of SAP Fiori. Take a look at the example below.

Usage

Use this cheat sheet if:

You need to design content for a responsive table.
You want to improve your content design for a responsive table.

Do not use this cheat sheet if:

You need to design content for a list, tree, grid table, analytical table, or tree table.

Guidelines

Step

Starting point: A “traditional” table with one line of text per cell.

Traditional table

Step

Change the alignment:

Left align text, IDs, phone numbers, URLs, passwords, email addresses, and status information.
Right align numbers (except IDs and phone numbers), dates, and times.

Change the alignment

Step

Use the object identifier control to display key identifiers.

Use the object identifier control for key identifiers

Step

Use the object number control (sap.m.ObjectNumber, property: emphasized) to emphasize the key attribute (usually the value of a value-unit combination).

Use the object number control to display key attributes

Step

To indicate status information, use an object status control with semantic text colors. For more information on semantic colors, see colors.

Use the object status control to display status information

Step

Remove columns by displaying the ID in brackets after the corresponding name.

Use ID formatting to reduce the number of columns

Step

To gain even more width per column, remove additional columns by combining them.

Combine columns

And you’re done. With just a few simple steps, you can easily bring the SAP Fiori style to a plain table.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Responsive Table (guidelines)
Object Display Components (guidelines)

Implementation

Responsive Table (SAPUI5 samples)
Responsive Table (SAPUI5 API reference)
Object Identifier (SAPUI5 samples)
Object Identifier (SAPUI5 API reference)
Object Number (SAP UI5 Explored)
Object Number (SAPUI5 API reference)
Object Status (SAP UI5 Explored)
Object Status (SAPUI5 API reference)