Intro

The responsive table is the default table in SAP Fiori. It contains a set of line items and is fully responsive. Depending on the scenario, users can also navigate from the line items to further details.

Usage

Use the responsive table if:

• You need a table. The responsive table is the default table in SAP Fiori.
• You need to use various controls inside a line item, such as micro charts, for example. In contrast, the analytical table supports only a very limited set of controls.
• The focus lies on working on line items, not on cells. The responsive table is optimized for viewing complete items on all devices.
• Selecting one or more items is a main use case and details are needed to choose the correct item.
• Line items are independent of each other and no operation across columns is needed.
• You want to have only one implementation for all devices. As the name suggests, the responsive table is responsive.

Do not use the responsive table if:

• The main use case is to select one item from a very small number of items, without viewing additional details. In this case, a select or combo box might be more appropriate.
• The main use case is to select one item from several items, with the possibility of viewing only a few details per item. In this case, a list might be more appropriate. Pay attention to the layout of the list item to ensure that it has a pleasant appearance. The master list is a good example of a list use case.
• The cell level and the spatial relationship between cells is more important than the line item. In this case, use the analytical table or grid table. Examples include spreadsheet analyses and waterfall charts. Note that neither the analytical table nor the grid table are fully responsive. Both are only available for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.
• You are working on more than 1,000 rows. In this case, the analytical table and the grid table are easier to handle and provide better performance. In contrast to the responsive table, the architecture of the analytical table and of the grid table is optimized for handling large numbers of items. Note that neither the analytical table nor the grid table are fully responsive. Both are only available for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.
• Comparing items is a major use case. In this case, the analytical table or grid table might or might not be more appropriate. Each cell contains only one data point. In contrast, the responsive table has more flexibility in terms of line items, including the ability to add more data points per cell and also the pop-in function. Both make comparisons more difficult. Note that neither the analytical table nor the grid table are fully responsive. Both are only available for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.
• Data needs to be structured in a hierarchical manner. In this case, a tree table might be more appropriate. Although the analytical table can have several grouping levels, it is not as flexible when nodes at several levels contain children. Note that neither the tree table nor the analytical table are fully responsive. You will need to take an adaptive approach by offering an additional UI for tablets.
• You need an overview of a large amount of data. In this case, use a chart.
• You just need it for layout reasons. In this case, use a layout container such as a horizontal layout or a vertical layout instead.
• You need read-only or editable field-value pairs. In this case, use a form instead. The responsive table is not optimized for form-like input navigation.

Don't

Don't: Do not use a responsive table as a form

See the table overview to decide which SAP Fiori table is most suitable for your needs.

Responsiveness

To ensure responsiveness, you must configure each column. Depending on the screen width (in pixels), the column needs to know which of the following responses is required:

• Stay in the table layout.
• Move to the pop-in (sap.m.Column, with the properties: demandPopin, minScreenWidth, popinHAlign, popinDisplay).
• Hide.

Since you have to define this for each column, you can also handle more than one column at a single breakpoint, such as moving three columns to the pop-in area at once.

Each of the three device types has a predefined value for the screen width. However, you will get better results if you offer more breakpoints by using pixel values instead of the predefined values.

For the smallest screen width, keep the following information in the table layout:

• The identifier of the line item
• The key attribute

The examples in the following tables help to illustrate this:

Layout

Components

The title bar consists of a toolbar.

The toolbar can contain entry points for the view settings dialog and the table personalization dialog, as well as view switches in the form of a segmented button, and buttons for Add, Edit, and other actions.

Beneath the toolbar, display a filter info bar (which itself is a special toolbar) if the responsive table is filtered.

To format data as part of items, apply the guidelines for formatting data. Controls commonly used inside items are the object identifier and the object number. For more information about these, please see object display components.

Behavior and Interaction

The responsive table is quite flexible in regards to its content.

Table Level

Scroll

Merge Duplicates

Select

Group

Show Aggregations

Load Items

Keyboard

The responsive table knows two different modes for keyboard interaction:

1. The navigation mode allows fast navigation on the whole screen (sap.m.Table/ sap.m.ListBase, property: keyboardMode, value: Navigation). This is the default keyboard mode of the responsive table. In this mode, the focus moves to one line item and to the controls inside this item before if leaves the table. The tab chain is kept short. If the focus is on the line item, it can be moved to other items using the arrow keys. In addition, F7 toggles the focus between item level and control level.

Use the navigation mode if:

• The table is read-only.
• The table currently contains no interactive content (for example, in read-only mode of an editable table). In this case, switch the keyboard mode at runtime as soon as the edit mode of the table is started/ended.
• The table contains only a minimal set of interactive content and it is unlikely that it is changed often.

2. The edit mode allows fast editing of the whole table (sap.m.Table/ sap.m.ListBase, property: keyboardMode, value: Edit). In this mode, focus moves to each interactive control inside all items before it leaves the table. The tab chain gets very long.

Use the edit mode if:

• The table contains many interactive controls.
• It is very likely that the content is changed frequently.
• The table needs to support mass editing scenarios.
• The table currently contains interactive content (for example, in edit mode of an editable table). In this case, switch the keyboard mode at runtime as soon as the edit mode of the table is started/ ended.

To provide better accessibility support, please ensure that your tab chain is kept short. If you use the keyboard mode “edit”, make sure that there is also a possibility to switch to the keyboard mode “navigation”.
Exception: The table is very short and contains only a very limited number of interactive controls, where the tab chain is anyway short.

Line Item Level

Delete Single Item Rows

Navigate

Edit Line Items

Click an Item

Cell Level

Show Information

Add Controls

Beside textual elements, you can add any control to a table cell.

Guidelines

Table Title

Implement the table title by using a toolbar control.

Use a table title if the title of a responsive table is not indicated in the surrounding area. Do not use a table title if it would just repeat text that is already above the responsive table.

Use a table title if you need the table toolbar. To avoid repeating text, feel free to use generic text as a table title, such as Items.

If you use a table title, be sure to include one of the following:

Loading Data

Columns – Best Practices

Minimize the number of columns:

• On a smartphone, use only one or two columns, depending on the content.
• On a tablet or desktop, use up to three columns if the responsive table is shown in the details area of a split-screen layout. Use up to four columns if using the full screen width, depending on the content.

If the responsive table does not fit on the screen width:

• Hide columns to reduce the width of the table.
• Use pop-in areas to show the whole content by increasing the height of the line items (sap.m.Column, properties: demandPopin, minScreenWidth).

At the smallest size, keep the following information in the table layout:

• The column that identifies the line item
• The column that contains the key attribute

If both of these do not fit on the respective screen width, keep just the column with the line item identifier in the tabular layout.

The responsive table assigns the same width to each column by default. It is recommended that you overwrite this default to provide optimal space for your content (sap.m.Column, property: width).

Optimize column width for its initial content (sap.m.Column, property: width). If the content is dynamic, optimize column width for typical content.

If you need more columns than those that fit on a tablet screen, which is usually five, to fulfill 80% of your main use cases, offer an option to add, remove, and rearrange columns via the table personalization dialog. Before doing so, try to reduce the number of columns, for example, by using several lines per column or by utilizing the pop-in function. See the cheat sheet for an example.

Column Headers – Best Practices

Within the column header, provide a label for each column (sap.m.Column, aggregation: header). The column header label is reused as a label in the pop-in area.

Exception: If the column does not pop in, you can leave out the column header label as long as at least one column still has a column header label.

Use controls that wrap, for example, text. Do not use controls that truncate, such as labels.

Column headers (sap.m.Column, aggregation: header) usually contain links or text-based controls.

Column headers can also contain other kinds of SAP Fiori controls. However, the column header cannot be aligned vertically, making it difficult to use many controls in the column header. Using other kinds of controls also creates problems with pop-in behavior and could thus lead to accessibility issues. Therefore, exercise caution when using them in a column header.

Accepted: Link as column header text (used rarely)

Content Alignment

For alignment of cell content, follow the guidelines below (sap.m.Column, properties: halgin, valign, sap.m.ColumnListItem, property: VAlign). Align the column header horizontally according to the cells’ content.

Vertical alignment:

Top-align where possible to facilitate reading the content on one line.

Do not use top-alignment if it results in a peculiar layout. This usually happens when controls that need more vertical space are combined with text-only controls, such as input fields. In this case, try center-alignment instead and fine tune it until the layout fits.

Content Formatting

The responsive table provides flexibility, including multiline cells, by enabling every control to be put into a cell.

Avoid truncation. Use controls that wrap the text.

For example, use text instead of a label.

Item States

Show only one state at any one time.

Numbers and Units

Actions

To trigger actions on multiple items, use a multiselection table (sap.m.Table, property: mode, value: sap.m.ListMode.MultiSelect):

• Offer the corresponding actions in the footer toolbar if the responsive table is the only area on the screen where actions can be applied. This has the advantage that the actions on the footer toolbar are fixed on the screen and you cannot scroll them away.
• In all other cases, show the actions on the table toolbar.

Do not offer action triggering on multiple items if the table is expected to have fewer than 10 items in most cases.

To trigger actions on a single item only (sap.m.Table, property: mode, value: sap.m.ListMode.SingleSelectMaster):

• Offer the corresponding actions in the footer toolbar if the responsive table is the only area on the screen to which actions can be applied. This has the advantage that the actions on the footer toolbar are fixed on the screen and cannot be scrolled away.
• In other cases, show the actions on the table toolbar.
• In rare cases, show the actions within the line item. Since these actions are repeated in every line and thus use a lot of screen real estate, only do this for one or two actions at most. In this case, show the action trigger near the content to which it belongs. Do not add a specific column for actions, but instead use transparent-style buttons. An exception to this is if the action trigger belongs to a link.

OK: Place actions near to the objects to which they belong

The following actions on single items must always be in-line:

From these three actions (delete, navigation, and edit), you can combine delete and edit, or delete and navigation.

Edit and navigation cannot be combined.

To trigger actions that are independent of the selection, show the actions on the table toolbar. Examples of such actions are add, edit (in the sense of changing the whole table to edit mode), sort, filter, group (or view settings), and table personalization.

To trigger a default action on the whole line item, use the “Active” or “DetailAndActive” column list item type (sap.m.ColumnListItem/ sap.m.ListItemBase, property: type, value: sap.m.ListType.Active).

Active items trigger an event when clicked, which can be handled by apps, for example, to open a dialog. Clicks on interactive controls within the item do not trigger the event, but are handled by the interactive control.

Do not use this for navigation, to switch the line item to an edit state, or to delete the item.

Active can be combined with edit and delete, but not with navigation. Do not combine active with single selection.

When you add an item, add the row:

• Beneath the last item if there are 10 items or less overall, or if you rarely add an item. Scroll the screen if necessary to ensure that the new item remains visible.
• As the first item if there are more than 10 items overall, or if you add an item quite frequently.

When you add items, ignore the sort, filter, and group settings when the item is added. As soon as the responsive table is sorted, filtered, and grouped again, the new item is handled accordingly, but not before.

Editable Content

For editable content, use input fields and any other interactive controls within the table cells that meet your input needs.

All SAPUI5 controls can be used.

If you need edit mode, change your text controls, such as label, text, and link, to input fields, or other appropriate controls as soon as you switch to edit mode, but not before.

You can do this by exchanging the control or, in more complex cases, by exchanging the whole responsive table.

For mass editing items:

• Provide multiselection (sap.m.Table/ sap.m.ListBase, property: mode, value: sap.m.ListMode.MultiSelect).
• Provide an Edit button.
• If several items are selected, choosing the Edit button opens a dialog in which the user edits the corresponding fields for all selected items.

This is similar to mass editing in the split screen app.

View Settings: Sort, Filter, and Group

Persist the view settings. When a user reopens the app, show the analytical table with the same sort, filter, and group settings as last defined by this user.

Personalization

To add, remove, or rearrange columns, use the table personalization dialog. Trigger the dialog via a button in the table toolbar.

Offer personalization if you need more columns than those that fit on a tablet screen, which is usually five, to fulfill 80% of your main use cases. Before doing so, try to reduce the number of columns, for example, by using several lines per column or by utilizing the pop-in function. See the cheat sheet for an example.

View settings and table personalization icons

Persist the column layout settings. When a user reopens the app, show the responsive table with the same column layout as last defined by this user.

Properties

sap.m.Table

The following additional properties are available for the responsive table:

• The property: fixedLayout defines the algorithm the control uses to define column width. Setting it to “false” would perform automatic calculations for the column width, based on the longest non-breakable content. You should always set it to “true” for performance reasons. Exceptions are permissible if the table has only a few columns on a large screen width and fewer than 10 rows are displayed.

• The property: backgroundDesign defines the background on which items are rendered. Use the default value.

• The property: showOverlay provides an overlay on the whole table, which prevents use of the responsive table. This is used within the list report floorplan to mark the table as outdated after filter settings have been changed but the new filter settings have not yet been applied. Do not use it in other cases.

• The property: insert adds a margin on all sides of the responsive table.

• The property: headerText is a simple way to set the table title if you just need a title. However, do not use any of the following:

  • A separate toolbar
  • variantManagement
  • headerToolbar aggregation

• The property: headerDesign affects the appearance of the header if the theme supports it. Leave the default value as it is.

• The property: footerText adds a small additional row below the table footer or last item. This row can contain text only. Do not use this property.

• The property: width defines the width of the whole table.

• The property: includeItemInSelection uses a click on the whole line item to select the corresponding item if the responsive table is in a selection mode. This competes with other settings like “Navigation” or “Active” and should therefore not be used.

• The property: enableBusyIndicator shows a busy indicator while data is loaded.

• The property: modeAnimationOn does not have any effect. Do not use it.

• The property: showSeparators allows you to show all, none, or some separators. The default setting, which is to show all separators, is to be used.

• The property: swipeDirection allows you to define the direction in which to swipe if additional actions are hidden behind a table row. This works only on touch devices. Do not use this property.

• The property: rememberSelections leaves items selected even if they are not currently visible, for example, through filtering. If this behavior is not wanted, set the flag to “false”, but you should do so only in exceptional cases.

• The property: busy sets the table to a busy state. While in busy state, the whole table cannot be used and items cannot be read due to an overlay.

• The property: busyIndicatorDelay defines the time after which a busy state is shown after the responsive table has been set to this state. Use the default value.

• The property: visible shows the table (“true”) or hides it (“false”).

• The property: tooltip does not have an effect. Do not use it.

sap.m.Column

The following additional properties are available for sap.m.Column:

• The property: width defines the width of the column in all units allowed by HTML, such as em, rem, %, and px.
• The property: styleClass is used if you need to change the visual design of a column. Do not use this, but use the default style instead.
• The property: visible shows or hides the column.
• The property: tooltip does not have an effect. Do not use it.

sap.m.ColumnListItem

The following additional properties are available for sap.m.ColumnListItem:

• The property: selected allows an item to be selected programmatically.
• The property: counter does not have any effect. Do not use it.
• Do not use the property: busy.
• Do not use the property: busyIndicatorDelay.
• The property: visible shows or hides the item.
• The property: tooltip adds a tooltip to a whole row. The tooltip is only shown on mouse interaction. It will not work on tablets or smartphones. Do not use it.

Resources

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