A grid table contains a set of data that is structured in rows and columns. It allows the user to scroll in both directions and can handle large numbers of items and columns.

Usage

Use the grid table if:

• The cell level and the spatial relationship between cells are more important than the line item. Examples include spreadsheet analyses and waterfall charts. Note that a grid table is not fully responsive. It is only available for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.

• You have to work on more than 1,000 rows. In this case, the grid table is easier to handle. In contrast to the responsive table, the architecture of the grid table is optimized for handling large numbers of items. Note that a grid table is not fully responsive. It is only available for desktop 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, a grid table might be more appropriate than a responsive table. In the grid table, each cell contains only one data point. In contrast, the responsive table is more flexible regarding 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 a grid table is not fully responsive. It is only available for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.

• You need an analytical table, but you cannot provide an analytical binding on the technical side. In this case, a grid table will do the work. Note that the grid table provides only one level of grouping, no aggregation options, and is also not fully responsive. It is only available for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.

Do not use the grid table if:

• You need a table. The responsive table is the default table in SAP Fiori. Additional use cases where you might need the responsive table include:
  • The focus is on working on line items, not on cells. The responsive table is optimized for displaying complete items on all devices, such as file browsing and a list of documents you want to act on, like purchase orders and purchase requisitions.
  • Selecting one or several items is the 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.

• The main use case is choosing one item from a very small number of items with no additional details. A select or combo box might be more appropriate.
• The main use case is choosing one out of several items with only a few details per item. A list might be more appropriate. Pay attention to the layout of the list item to ensure that it has a pleasant appearance.
• Data needs to be structured in a hierarchical manner. Use a tree table instead. Note that neither the tree table nor the grid table are responsive. You will need to take an adaptive approach by offering an additional UI for smartphones and tablets.
• You need an overview of a large amount of data. In this case, use charts.
• You just need it for layout reasons. In this case, use a layout container such as HBox or VBox.
• You need read-only or editable field-value pairs. Use a form instead. The grid table is not optimized for form-like input navigation.

Responsiveness

A grid table is available for desktops and tablets, but not in smartphone sizes. It supports touch devices, but is not optimized for small screens.

If you use a grid table, note that you have to implement a fallback solution for small screens. This fallback solution does not need to support all use cases.

You could create a fallback by using a responsive table, but a completely different solution, such as showing charts in a read-only case, might be more appropriate.

Layout

Components

A grid table does not consist of other elements. However, it is common to use a toolbar above the grid table.

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

Behavior and Interaction

A grid table is quite restricted in terms of its content.

Table Level

Scroll

Select

Selection Mode

Selection for a grid table depends on the chosen selection mode. The following options are available:

Selection Behavior

An item can be selected in different ways, depending on the configuration of the grid table (sap.ui.table.Table, property: selectionBehavior):

• Row: An item is selected by clicking the checkbox or the row. Use this option for multi-selection grid tables if clicking a row or a cell is not used for anything else.
• RowSelector: An item is selected only by clicking the checkbox in the selector cell. Use this option if clicking the row (or a cell inside the row) is used for something else, such as navigation.
• RowOnly: An item is selected only by clicking the row, and not using checkboxes in the selector cells. Use this for single-selection grid tables if clicking a row or a cell is not used for another purpose, such as navigation.

Compact, Cozy, and Condensed

Like all SAP Fiori controls, the grid table is shown in compact mode on a desktop and in cozy mode on tablets.

For a desktop, you can also display even more rows on the same screen height by adding the condensed mode in addition to the compact mode. This renders less white space for each item.

Note that the condensed content density has always to be set in addition to compact. Do not use condensed on its own. Do not mix condensed with cozy. Doing so could lead to unpredictable and / or unwanted results, e.g. cozy sized controls in condensed sized containers, missing padings, etc.

Note that neither compact mode nor condensed mode can be interacted with via touch. Even on a desktop with a touch screen, users will have difficulty selecting rows or using controls inside the cells when using their fingers.

Furthermore, condensed mode is not available for Internet Explorer 9. If condensed mode is to be used, please provide a fallback.

For more information on cozy and compact modes, see content density.

Column Header

Column Header Menu

Sort

Filter

Group

Freeze Columns

Line Item Level

Drag and Drop

Context Menu

Cell Level

Guidelines

Data Density vs. Complexity

The grid table can be used to display large amounts of data. Unfortunately, the grid table has a high data density and therefore conveys an immediate feeling of complexity.

Only show tables with a lot of data as a last resort. Try the following instead:

• Break down the data into manageable chunks and allow the user to navigate or drill down between them.
• Use charts with drilldown functionality until the amount of data is more manageable.

Try to avoid horizontal scrolling in the default delivery.

Try to minimize the number of columns, especially if there is a large number of rows.

Table Title

Implement the table title by using a title control in a toolbar.

Use a table title only if the title of the table is not indicated in the surrounding area.

Do not use a table title if it simply repeats text that is already above the table. For example:

• A pricing conditions table is the only control on a tab labeled Pricing Conditions.
• A section or subsection on an object page contains only one table.

Use a table title if you need the item count, table toolbar, or variant management. To avoid repeating text, feel free to use generic text as a table title, such as Items.
Exception: If the surrounding area contains the table title, and both the item count and toolbar can be added to the surrounding area, no additional table title is needed.
Example: An object page (sub-)section contains only one table. In this case, add the item count and the table toolbar to the (sub-)section header.

If you use a table title, show either a title for the table, with or without variant management, or an item count in the following format:

Multiple Selection

• We strongly recommend using the multi-selection plug-in. This ensures that all items selected using Select All or as part of a range are included – even if some items were not initially loaded in the front end. This is not the case if you use the multi-toggle option.
• Do not limit the range selection for the multi-selection plug-in unless you have to.
  • If the dataset is small and/or completely available in the front-end, set the limit property to 0 to enable the Select All option and allow users to select any range.
  • If you have a large dataset, set a limit on the number of selected items to avoid performance issues. Also bear in mind that some actions won’t be helpful if the dataset is too big (for example, a delete operation on 2 million database entries).
• If you set a limit, also display the corresponding message when the user selects more items at once than the limit allows (sap.ui.table.plugins.MultiSelectionPlugin, property: enableNotification).

• In multiple selection mode (multi toggle), do not show checkboxes in the first data column in the default delivery to avoid confusion.

Loading Data

Columns – Best Practices

Minimize the number of columns. Avoid the need to scroll horizontally in the default delivery.

Optimize the column width for its initial visible content, including the column header texts. If this is not possible (for example, if showing the full texts would result in extremely wide columns), let the texts truncate. End users can change the width of the column to read the full text, as needed.

Maintain a constant column width and avoid adjusting it automatically when the content changes.

Always keep to one line of text. Do not wrap.

Column Headers – Best Practices

For each column, provide a label in the column header. In the default delivery, do not truncate the column header texts. Only let the text truncate if showing the full text would make the column too wide. Never wrap the text.

Content Alignment

For alignment of cell content, follow the guidelines below.

Left-align the following: text, IDs, phone numbers, URLs, passwords, and email addresses.

Right-align numbers (except IDs).

This ensures comparability of numbers and amounts.

Right-align amounts with currencies to the cell and align them in terms of their respective decimal points.

This ensures that amounts with different currencies are shown correctly, whether these currencies have 0, 2, or 3 decimals.

For aligning to the decimal point, use the sap.ui.uinified.Currency control.

Right-align dates and times.

This ensures comparability for most formats and locales.

Left-align status information.

Center-align icons.

Left-align micro charts.

Content Formatting

Key Identifier

Use a bold label or an emphasized link as the key identifier of an item. In the default delivery, show the key identifier in the first column.

For strings with IDs, use one of the following options:

• Show the ID in a separate column. Use this format if users need to sort, group, or filter by both the string and the ID.
• Show the ID in brackets after the corresponding string. In this case, sorting, filtering and grouping is available for either the string or the ID. Use this format only if users don’t need to sort, filter, and group by both values.

Truncation

Avoid truncation of typical content in the default delivery (sap.ui.table.Column, property: width). However, since the columns are resizable, do not worry too much if truncation occurs as columns can still be enlarged if necessary.

To prevent adverse side effects when scrolling vertically, all line items must also have the same height. If you need to decide between truncation and different row heights, choose truncation. Do not wrap.

Number of Links

Are there too many links? Use subtle links to avoid a wall of links. Standard links are also emphasized more if they are surrounded by subtle links.

Missing Value

If there is no value for a cell, leave it blank. Do not display text as N/A.

Numbering Items

In terms of numbering items:

• If the item number is more like an ID with regard to its description, use ID formatting as described above.
• In all other cases, use a separate column for the item number.

Status

For status information, use semantic colors on the foreground elements.

For status information on text, use an object status.

Micro Charts

Use only the following micro charts: Bullet, comparison, stacked bar. When using micro charts, use them in size XS.

Empty Tables

Avoid empty grid tables. If necessary, provide instructions on how to fill the grid table with data (sap.ui.table.Table, properties: noDataText, showNoData).

Examples:

• If a table is initially empty, provide at least a basic text:
  No items available.
  Overwrite this whenever a hint can be provided on how to fill the table with data.
• If a table is used together with a filter bar (as in the list report), and is initially empty, use the following text:
  To start, set the relevant filters.
• If a table is used together with a filter bar and the filter does not return results, use the following text:
  No data found. Try adjusting the filter settings.

Adapt the texts above if:

• The standard text is not precise enough for your use case (for example, a search is also offered, or only the search is offered).
• The standard text is misleading (for example, if the data is filled based on a master-detail pattern instead of filter settings).

Invalid State

To show an invalid state of the grid table within the list report floorplan, show an overlay on the grid table and the corresponding toolbar (sap.ui.table.Table, property: showOverlay). The overlay prevents user interactions.

Use this within the list report floorplan if filter settings have been changed but the grid table is has not yet been updated.

Item States

To show that a modified item contains an error, for example, within the global edit flow, add the string Contains errors in the Editing Status column and highlight the row accordingly. This string replaces the Modified string.

To show that an item is locked, add a transparent-style button with the corresponding icon and the text Locked by [name] in the Editing Status column.

To show that an item is in draft state, add a transparent-style button with the text Draft in the Editing Status column.

Show only one state at a time.

Numbers and Units

Show the unit of measurement in one of the following ways:

Number and Unit in Same Cell

The number and the unit are in the same cell. Do this if sorting, filtering, or grouping by the unit of measurement are not needed.

Use a currency control to display the concatenated string.

Number and Unit in Separate Columns

The number and unit are in separate columns. Do this if sorting, filtering, or grouping by the unit of measurement are a common use case.

Note that this column can be hidden or moved independently of the column containing the corresponding number. Therefore, be sure to have clear labels for both columns to communicate the dependency.

Show the unit of measurment on the column header, if the unit of measurement is the same for all rows. If not, show the unit of measurement within the row.

Drag and Drop

If you offer drag and drop for rearranging items within the table, use drop targets that are between items (sap.ui.core.dnd.DropPosition.Between). This provides better feedback on where the item will be inserted. Show the “move” mouse cursor (sap.ui.core.dnd.DropEffect.Move).

Do not combine rearranging items and sorting. If you really need to do so, make sure that there is a dedicated sort criterion for the user-defined sort order, and only offer options for rearranging items if this sort order is set.

Drag and drop is “invisible” on the UI: users can’t see where dragging is available and where it isn’t. In addition, it is not accessible, since there is no generic keyboard interaction. Drag and drop is also not available on all browsers. For these reasons, provide it only in addition to existing (and visible) UI elements that fulfill the same purpose. For example, offer (toolbar) buttons for moving or for copying and pasting items.

When combining rearranging items with grouping, be aware that moving items to another group also means that a value of the dropped item changes: because grouping is based on values in a column, the dropped item needs to take on the value of the target group for the corresponding column. If this is not wanted, do not allow users to rearrange items in grouped tables.

Example:
A table is grouped by availability. An item is moved from the group “Not Available” to the group “In Stock”. In this case, the moved item needs to change its availability to “In Stock” to match the target group. If changing the value doesn’t make sense make sense, only allow users to rearrange the items within the same group, or don’t allow rearranging at all.

Context Menu

Use the context menu only as a quick way of accessing functions that are already available elsewhere (for example, as buttons in the toolbar). Don’t just offer actions in the context menu itself, as users might not realize that these actions are available at all.

The context menu can be triggered for the table, row, or cell. However, we do not recommend using context menus for cells: because the content of a cell is a different touch target than the cell itself, opening a cell context menu via touch is quite hard, even in cozy mode.

Do not combine context menus with condensed mode: editable controls fill the entire space inside a cell. Because of this, context menus cannot be opened at all with touch or mouse interaction.

Actions

Multiple Items

To trigger actions on multiple items, use a mutliselection grid table (sap.ui.table.Table, property: selectionMode, value: MultiToggle). Offer the corresponding actions in the table toolbar.

Do not offer action triggering on multiple items if the table is generally expected to have fewer than 10 items. In this case, try to use the responsive table instead of the grid table.

Single Item

To trigger actions on a single item (sap.ui.table. Table, property: selectionMode, value: Single):

• Show the actions on the table toolbar.
• In rare cases, show the actions within the line item. One example would be an Add to Cart button in a shopping application. Since these actions are repeated in every line and thus use a lot of screen real estate, do this only for a maximum of one or two actions. Provide a separate column per action. Use a button, unless the action trigger belongs to a link. Hide the action in rows for which it is not applicable.

To trigger navigation on line item level, choose one of the following options:

• Use a link for the attribute that identifies the row. Clicking the link triggers the navigation.
• Add the RowActions column and show the navigation indicator (  ) at the end of the row. The navigation arrow triggers the navigation.

Special case: Multi-selection in a master-detail scenario
When a multi-selection table is used in a master-detail scenario, it is not clear which item was last opened (for example, which item is currently shown in the second column of a flexible column layout). In this case, you can display a “navigated” indicator to show which item is currently open.

Use the RowActions column only for one or both of the following actions:

• Navigate to details page ( )
• Delete ( )

The RowActions column does not provide a column header text. It is fixed and will not scroll away. Users also cannot personalize this column.

Single Cell

To trigger actions on a single cell, create the corresponding click event. Do not use the cell click event if the cell contains interactive controls, such as links.

Add Items

For adding items, place an Add or Create text button on the table toolbar.

• Use Create if the button adds a brand new item that doesn’t yet exist on the database.
• Use Add if the item already exists and is merely added or assigned to the current object.

Show new items as the first item of the table, with a visual highlight at the beginning of the row.

For more details, see the guidelines for managing objects (including subarticles).

Enabling/Disabling Actions

To indicate if an action can be applied to the current selection:

• Enable the action if it always works, regardless of whether or not items are selected.
• Enable the action if it can be applied to all selected items.
• Enable the action if it can be applied to some of the selected items. If the action is triggered, show a message that informs the user how many items will be affected. Let the user choose whether to apply the action anyway or cancel the action.
• Only disable the action if it can be applied to none of the selected items.

For more details, see UI Element – States.

If the action was applied, and if the items are still available, keep them selected.

Editable Content

View Settings

Sort

Filter

Group

In general, offer reasonable grouping by default if appropriate. Enable the user to ungroup via the view settings dialog or via the table personalization dialog.

Personalization

Only 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.

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

Add, Remove, and Rearrange Columns

To add, remove, or rearrange columns, use one of the following:

• The table personalization dialog: It offers some simple settings for column layout. Use this if you have only a few columns to choose from and/or you use the view settings dialog.
• The p13n dialog: Besides various complex view settings, it also provides settings for column layout. Use this if you have a large number of columns to choose from and/or you use this dialog anyway for view settings.

In both cases, trigger the dialog via the settings button in the table toolbar.

You can also use drag and drop to rearrange columns (sap.ui.table.Table, property: enableColumnReordering). If you allow rearranging via drag and drop as well as via a dialog, keep both places in sync.

Resize Columns

Resizing columns works differently on touch and non-touch devices.

• Non-touch devices: Drag and drop the column separator on the right side of the column. Double-clicking the column separator optimizes the width of the column to the data currently loaded into the front end, which is usually about 100 rows.
• Touch devices: Clicking the column header reveals two buttons: one for opening the column header menu, another one for resizing the column. Drag and drop this second button to resize the column.

Freeze Columns

To freeze columns, offer the setting in the column header menu (sap.ui.table.Table, property: enableColumnFreeze). Selecing Freeze on a column freezes all columns from the first one to the one where Freeze is selected. On this column, the menu entry changes from Freeze to Unfreeze.

Highlight Items

To show that an item needs attention, a highlight indicator can be shown in front of the item. The highlight indicator can be used to indicate:

• A semantic state, such as red or orange for an error or warning. In this case, use semantic colors.
• Additional information, such as blue to highlight newly added items. In this case, use semantic colors.
• Industry-specific or process-specific states, such as “out of stock” or “excess of inventory”. In this case, use indication colors.

Be aware that the highlight is just an indication. It does not tell users exactly what is wrong. Make sure that you provide this information within the table row, ideally in the same color.

For details on the use of highlight colors, see How To Use Semantic Colors / Industry-Specific Colors.

(sap.ui.table.Table, aggregation: rowSettingsTemplate)

Tables in Object Pages

In the object page, we advise against using the analytical, grid, and tree tables. Instead, use a responsive table and offer navigation to a list report with the table types mentioned above.

For more information on the use of tables within the object page, see the Tables section of the Object Page article.

Export to Spreadsheet

On the table toolbar, apps can provide a menu button for exporting table data to a spreadsheet. For the export, use the export to spreadsheet function.

Paste

The browser paste function can be used to paste data from the clipboard to the table (CTRL+V or browser context menu).

• If the focus is on row level, the app has to take the data from the clipboard and add it to the corresponding controls within the table.
• If the focus is on an editable control within the table, the control gets the data automatically.

Pasting via the context menu does not work if a custom context menu is used.

Properties

sap.ui.table.Table

The following additional properties are available for the grid table:

• The property: width defines the width of the grid table.
• The property: rowHeight defines the height of each row in the grid table. Since the height required is calculated automatically by the grid table, this property is only needed rarely.
• The property: columnHeaderHeight defines the height of the column headers. Since the height required is calculated automatically by the grid table, this property is only needed rarely.
• The property: columnHeaderVisible can be used to hide the column headers. Always show the column headers.
• The property: showColumnVisibilityMenu provides an additional entry in the column header menu that allows columns to be shown or hidden. In SAP Fiori, columns are shown and hidden via the table personalization dialog or via the table personalization dialog. Do not use this property.
• The property: visibleRowCount defines the height of the grid table. Show as many rows as fit on the screen.
• The property: visibleRowCountMode defines whether the height of the grid table is fixed or automatically calculated based on the space provided by the underlying container. For automatic calculation, make sure that all rows have the same height.
• The property: minAutoRowCount defines the minimum number of rows that must be shown if the property: visibleRowCountMode is set to “auto”. Show at least three to five rows.
• The property: firstVisibleRow defines the first row shown in the visible area of the grid table. The grid table is scrolled accordingly.
• The property: allowColumnReordering is deprecated. Do not use it. Use the property: enableColumnReordering instead.
• The property: editable does not have a visible effect. Do not use it.
• The property: enableGrouping turns the experimental grouping on or off. Handle with care.
• The property: enableCustomFilter changes the filter entry in the column header menu from an edit box to Filter…. Selecting this entry throws an event to which apps can react, for example, by opening a dialog. In general, you should choose the built-in filter over your own implementation. Specifically, keep filtering via the column header menu simple, while offering more advanced options via the table personalization dialog.
• The property: enableBusyIndicator has not yet been fully implemented. Do not use it.
• The property: title adds a line of text on top of the grid table. Do not use this. To add a title to the table, use a toolbar.
• The property: footer adds a short text at the bottom of the table.
• The property: Busy sets the grid table to busy state. While in busy state, the whole table cannot be used and items cannot be read due to an overlay.
• The property: Tooltip does not have an effect. Do not use it.
• The property: alternateRowColors displays the rows with alternating background colors (“banded rows”). Do not use it.

sap.ui.table.Column

The following additional properties are available for the column:

• The property: visible defines whether a column is shown or hidden.
• The property: name defines the name shown in the column header menu for showing and hiding columns. In SAP Fiori, columns are shown and hidden via the table personalization dialog or via the table personalization dialog. Do not use this property.
• The property: headerSpan defines whether one column header is used for one or several columns. To prevent adverse side effects, always use one column header for only one single column. Do not use this property.
• The property: Tooltip does not have an effect. 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.

As with the list and the responsive table, the grid list displays a set of items. In contrast to both controls, the grid list displays the items not in rows, but in a grid.

The grid list is usually used as an alternative view for a list or table. It is ideal for displaying images, charts, object cards, and other content, which profit from more height (but less width).

Usage

Use the grid list if:

• Your content is “visual” and profits from the rectangular format of the items. This is true for e.g. images, charts, and object cards.
• The focus is on items, not on cells. The grid list shows complete items.
• You want to display a homogeneous set of basic data.
• You need to sort, group, or filter simple data sets.
• As an alternative view for tables or lists, if the content profits from the different format.

Do not use the grid list if:

• Your content is not appropriate for a card-like format. For example, do not use the grid list for displaying a wall of text. Use a table instead.
• 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.
• Data needs to be structured in a hierarchical manner. In this case, a tree might be more appropriate.
• 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 the CSSGrid.
• You want to manage complex datasets that need to be extensively sorted, grouped, filtered, or edited. In this case, use a table.

Responsiveness

The responsiveness of the grid list results from the underlying grid. The underlying grid is defined by rows and columns. Columns can have a minimum and maximum or a fixed size. Whenever an additional column fits on the screen, it will be added. If a column does not fit on the screen anymore, it will be removed. Items are re-layouted accordingly.

Optionally, there can be different configurations for the underlying grid based on breakpoints, for example based on the device types.

To define the grid layout and behavior, you can use one of the pre-defined layouts:

• Grid box layout: Adds a variable number of columns depending on the available screen width. Columns have either a fixed width or can “breathe” slightly. All rows have the same height, and all items are the same size.
• Responsive column layout: The number of columns depends on breakpoints (4 columns for size S, 8 for size M, 12 for size L, and 16 for size XL). The width of the columns grows or shrinks with the available screen space until the next breakpoint is reached. The row height of the grid is determined by the height of the highest item in the row. The number of rows and columns taken up by an item can differ.

Alternatively, you can define your own grid. This gives you much greater flexibility to influence both the layout and the (responsive) behavior of the grid.

The underlying grid defines the available space per item. The width can differ pending on the screen width (“breathing”) or be fixed. The height can differ pending on the content of the item or be fixed. “Breathing” items make better use of the available screen space and is therefore recommended. Make sure, that the item adapts to the resulting width / height, for example by

• Re-layouting the item content
• Hiding less important information
• Re-sizing content, such as images or charts.

Items can use one ore more grid cells. Items can also be different sizes (for example, to allow for varying text lengths/wrapping in different items).

Components

Behavior and Interaction

Scroll

The height of the grid list is defined by the number of items it contains. It does not have a scroll container on its own but is scrolled together with the page. When the user scrolls the page, the title bar and filter infobar can stick to the top of the surrounding layout container (sap.m.GridList, property: sticky).

Showing more items

If the grid list works in a “growing” mode, it only loads a few items at first. Additional items are only loaded (and rendered) on request. This request can either be triggered by scrolling (preferred), or by clicking the More button. Use the latter one only if content follows below the grid list. Use the “growing mode”, if more than 200 items are expected to be displayed.

If using the “More” button,

• show the number of items already loaded and (if possible) the total number items below the text More.
• do not show an item count on the title bar. Use the count on the More button instead.

In any case, if the “growing mode” is used, do not show more than 1,000 items overall.

Select

A grid list can have one of the following selection modes (sap.m.GridList/ sap.m.ListBase, property: mode):

• None: Items cannot be selected (sap.m.ListMode.None).
  Beware: Items can still use the sap.m.ListType “navigation”, which allows click handling on specific items. Only use this option if the click triggers navigation to a corresponding item details page.

• Single selection master: One item in the grid list can be selected. Items are selected by clicking the whole row. The single select master mode has no obvious visual cues, such as checkboxes or radio buttons. It only provides a light blue background for the selected state. Because of this, it can barely be differentiated from grid lists without selection (mode: None). Single select master is the preferred mode for single selection. (sap.m.ListMode.SingleSelectMaster).

• Single selection left: One item in the grid list can be selected. For this, the grid list provides radio buttons on the left side of each item. Only use this mode if a click on the whole item is being used for something else, such as navigation. (sap.m.ListMode.SingleSelectLeft). Even in this case, prefer single select master and synchronize the selection with the navigation, so that the navigated item is also the selected item.

• Multi selection: Users can select one or more items. For this, the grid list provides checkboxes on the left side of each item. (sap.m.ListMode.MultiSelect). The Shift key can be used to select a range. Try to avoid combining multi selection with navigation.

For all single selection modes, make sure that one item is initially selected. Otherwise, the user cannot return to the initial state. A selected item can only be deselected by selecting another item.

Click an Item

The whole item can be clickable. An event is fired by clicking the item (anywhere where there is no interactive control inside the item). Apps can react on the event, for example, by opening a dialog (sap.f.GridListItem, property: type, value: sap.m.ListType.Active or sap.m.ListType.DetailAndActive).

Active elements do not have a visual indication and can therefore not be differentiated from non-active elements.

Active is a list item type and can therefore not be used together with “navigation” or “edit”. In addition, “active” uses the whole item as a clickable area and therefore cannot be used together with a grid list in “single select master” mode.

Drag and Drop

One or several items can be repositioned within a grid list or moved to other UI elements using drag and drop operations (sap.m.ListBase, aggregation: dragDropConfig). While being dragged, the items are shown as ghost elements on the mouse cursor.

Drop targets can be on items, between items, or both (sap.ui.core.dnd.DropPosition). On a drop target, the mouse cursor changes to either a “copy”, “link”, “move”, or “none” cursor. “None” indicates that the dragged item cannot be dropped in the current position (sap.ui.core.dnd.DropEffect).

Drag and drop is only available on supporting browsers.

When using drag and drop, keep the following in mind:

• Drag and drop is “invisible” on the UI: users can’t see where dragging is available and where it isn’t. In addition, it is not accessible, since there is no generic keyboard interaction. Drag and drop is also not available on all browsers. For these reasons, provide it only in addition to existing (and visible) UI elements that fulfill the same purpose. For example, offer (toolbar) buttons for moving or for copying and pasting items.
• If you offer drag and drop for rearranging items within the grid list, use drop targets that are between items (sap.ui.core.dnd.DropPosition.Between). This provides better feedback on where the item will be inserted. Show the “move” mouse cursor (sap.ui.core.dnd.DropEffect.Move).
• Be aware that due to the re-arrangement of the items which happens after an item is dropped, it is not always clear where the item will finally be placed.
• When dropping items from outside the grid list, adapt the size of the drop indicator to match the target layout of the item (sap.f.dnd.GridDropInfo, property: dropIndicatorSize).
• Do not combine rearranging items and sorting. If you really need to do so, make sure that there is a dedicated sort criterion for the user-defined sort order, and only offer options for rearranging items if this sort order is set.
• When combining rearranging items with grouping, be aware that moving items to another group also means that a value of the dropped item changes: because grouping is based on a specific data point, the dropped item needs to take on the value of the target group for the corresponding data point. If this is not wanted, do not allow users to rearrange items in grouped grid lists. Example:
  A grid list is grouped by availability. An item is moved from the group “Not Available” to the group “In Stock”. In this case, the moved item needs to change its availability to “In Stock” to match the target group. If changing the value doesn’t make sense, only allow users to rearrange the items within the same group, or don’t allow rearranging at all.

Loading Data

To indicate that the grid list is currently loading items, use the busy state. (sap.m.GridList, property: busy). Do not show any items or text. As soon as the data is loaded, remove the busy state and show all items.

Empty Grid Lists

Try not to display an empty grid list. If there is no way around this, provide instructions on how to fill the grid list with data (sap.m.ListBase, properties: showNoData, noDataText).

Examples:

• If a grid list is initially empty, provide at least a basic text:
  No items available.
  Overwrite this whenever a hint can be provided on how to fill the grid list with data.
• If a grid list is used together with a filter bar (as in the list report), and is initially empty, use the following text:
  To start, set the relevant filters.
• If a grid list is used together with a filter bar and the filter does not return results, use the following text:
  No data found. Try adjusting the filter settings.

Adapt the texts above if:

• The standard text is not precise enough for your use case (for example, a search is also offered, or only the search is offered).
• The standard text is misleading (for example, if the data is filled based on a master-detail pattern instead of filter settings).

Context Menu

You can attach a context menu to a grid list. The context menu gives users an alternative way to modify the whole grid list or an individual item by providing access to context-specific actions. A context menu is opened by right-clicking (mouse), long press (touch devices), or via keyboard using the context menu key or SHIFT+F10. If a control inside a grid list is the “click target”, and the control also provides a context menu, the control context menu “wins”.

Use the context menu only to give users a quick way of accessing functions that are already available elsewhere (for example, as buttons in the toolbar). Don’t just offer actions in the context menu itself, as users might not realize that these actions are available at all.

Be aware that using the context menu overrides the browsers context menu, which can no longer be opened.

Group

If grouped, a group header is displayed (sap.m.GroupHeaderListItem) above all items which belong to the corresponding group. The group header is not interactive.

Guidelines

Actions

To trigger actions on multiple items, use a multi-selection grid list (sap.m.GridList, property: mode, value: sap.m.ListMode.MultiSelect), and offer the corresponding actions on the toolbar of the grid list. Keep the toolbar sticky (sap.m.GridList, property: sticky).

In rare cases, you can also offer the corresponding actions in the footer toolbar. Do this only if the grid list is the only area on the screen to which actions can be applied and if the actions are finalizing.

Do not offer actions for multiple items if the grid list is expected to have fewer than 10 items in most cases.

To trigger actions on a single item only (sap.m.GridList, property: mode, value: sap.m.ListMode.SingleSelectMaster), the action can also be shown within the item. One example would be an Add to Cart button in a shopping application. Since these actions are repeated in every item 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. Use a button, unless the action trigger belongs to a link. Hide the action in rows for which it is not applicable.

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

• Delete: Use the “Delete” mode of the grid list (sap.m.ListBase, property: mode, value: sap.m.ListMode.Delete). This places a Delete button at the right side of an item. Clicking this button triggers the deletion of the corresponding item. Do not use this mode if deleting multiple items at once is the preferred use case.
  Delete is a mode of the grid list and therefore cannot be used together with single selection or multi-selection.

• Navigation: Use the “Navigation” item type (sap.m.ListItemBase, property: type, value: sap.m.ListType.Navigation). This places a Navigation indicator at the right side of an item and the entire item becomes clickable. Use this to navigate to a new page containing item details. In rare cases, you can also use this for the category navigation pattern without navigating to another page. By contrast, clicking an interactive control within an item does not trigger the navigation event. Instead, the corresponding control handles the click event.
  “Navigation” is an item type and therefore cannot be used together with “edit”, or in combination with click events for the entire item (“active”).

• Edit: Use the “Detail” list item type (sap.f.GridListItem, property: type, value: sap.m.ListType.Detail). This places an Edit icon at the right side of an item. Clicking the button triggers the edit event. Use this event to switch the corresponding item to edit mode.
  Edit is a list item type and therefore cannot be used together with “navigation” or in combination with click events for the entire item (“active”).

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

Design for Performance

To optimize performance, we recommend showing no more than 200 items at once in the responsive table. For larger datasets (up to 1,000 items), use the “growing” mechanism to limit the number of displayed items, and make sure that users can filter the data.

Add Items

• Place the Add or Create text button on the toolbar of the grid list.
  • Use Create if the button adds a brand new item that doesn’t yet exist on the database.
  • Use Add if the item already exists and is merely added or assigned to the current object.
• Place new items always as the first item of the grid list.
• Use highlight (information state) on the new item.

After pressing the Add button, there are three possibilities for adding an item, which should be considered in the following priority:

• Add the item inline. Create an empty, editable item as the first item of the grid list. Show the Save button on the toolbar of the grid list. This option is recommended for simple scenarios where just a few input fields have to be filled.
• Open a dialog for items where up to 8 input fields need to be filled. Save the new item at the dialog level.
• Navigate to a new page. This behavior should only be used for very complex scenarios that cannot be handled by a dialog (for example, creating complex objects). When the user presses Save in the footer toolbar of the create page, navigate back to the grid list.

There are three different states of a new item:

• New: The item was just created and is still in edit mode. It is highlighted with a visual indicator (information state).
• Recent: The item was saved but is still highlighted and displayed as the first item of the grid list. Current filter, sort and group criteria are ignored since the item should remain visible.
• As soon as the grid list is sorted, filtered, or grouped again, the new item is handled accordingly and loses the visual highlight, but not before.

In the context of the draft handling new items are not saved on grid list level, but rather with the entire draft.

Export to Spreadsheet

• On the toolbar, provide a menu button for exporting items as tabular data to a spreadsheet.
• For the export, use the export to spreadsheet function.

Mass Editing

• Provide multiselection (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.

For details, see mass editing.

Paste

To paste data from the clipboard to the grid list, the browser functionality for paste can be used (CTRL + V or browser context menu).

If the focus is on item level, the app has to take the data from the clipboard and add it to the corresponding controls within the items.

If the focus is on an editable control within an item, the control gets the data automatically.

Pasting via context menu does not work if a custom context menu is used.

View Settings

• Provide individual buttons for each of the following settings on the toolbar of the grid list: sort, filter, group.
• Clicking one of these buttons opens the view settings dialog or P13nDialog dialog with just the relevant page inside.
• When closed, apply the settings to the grid list accordingly.

Keep the following in mind:

• Do not offer any of these features if the grid list is expected to have only a small number of entries (up to 20 in most cases).
• If filtering is a main use case, do not offer filtering on the toolbar of the grid list. Use the filter bar instead.
• Always use only the view settings which are really needed. For example, do not offer grouping if it does not support your use case well.
• Persist the view settings. When a user reopens the app, show the grid list with the same sort, filter, and group settings as last defined by this user.

Sort

• For the default sort settings, sort by the item title, which is usually the identifier of an item.
• If you offer sorting, offer it for each data point available in the item. Allow sorting in both directions, ascending and descending. The descending sort order must always be the exact reverse of the ascending sort order.
• For each data point, provide a meaningful sort order. For example:
  • Sort text alphabetically
  • Sort numbers by their value
  • Sort status information by the severity of the status:
    • Ascending: Sort status information from positive to negative, with neutral last.
    • Descending: Sort status information from negative to positive, with neutral first.
    • Ascending with different values per severity level: Sort status information from positive to negative, with neutral last. Sort different values within a severity level (semantic color) alphabetically.
    • Descending with different values per severity level: Sort status information from negative to positive, with neutral first. Sort different values within a severity level (semantic color) alphabetically.

Filter

• To display the current filter state, use the infobar below the title. Clicking the infobar opens the filter page of the corresponding dialog.
• Show the infobar only if the filter settings are not shown somewhere else. For example, do not show the infobar for settings taken in the filter bar or in a select placed in the toolbar of the grid list.
• If the infobar is shown, provide an option to reset all corresponding filters on the infobar.
• Keep the infobar sticky (sap.m.GridList, property: sticky).

Group

• To display the current group state, group headers are shown.
• On the group header, show the following text (sap.m.GroupHeaderListItem, property: title):
  [Label of the grouped data point]: [Grouping Value]
• If there is no grouping value, show the following text:
  [Label of the grouped data point]: (Not Available)
  This is the case if you have a group of items that don’t have a value for the grouped data point.

Enabling/Disabling Actions

To indicate if an action can be applied to the current selection,

• Enable the action if it always works, regardless of whether or not items are selected.
• Enable the action, if it can be applied to all selected items.
• Enable the action, if it can be applied to a part of the selected items. If the action is triggered, show a message that informs the user about how many items will be affected. Provide the choice to apply the action anyway or to cancel the action.
• Only disable the action if it can be applied to none of the selected items.

For more details, see UI Element States.

If the action was applied, and if the items are still available, keep them selected.

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

To trigger a default action on the whole item, use the “Active” or “DetailAndActive” list item type (sap.f.GridListItem, 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 Active 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.

Grid Lists in Object Pages

A grid list with up to 20 expected items can be displayed right away, without lazy loading.

If you expect the grid list to have more than 20 items, use one of the following 3 options:

• Lazy loading (More button): Use this option if you expect to have up to 100 items.
• Tab navigation: If you expect to have more than 50 to 100 items, but less than 400, use the object page with tab navigation instead of anchor navigation. Put the grid list on a dedicated tab.
• Navigation to a list report: If you expect the grid list to have more than 400 items, or if the tab approach is unsuitable, restrict the number of items in the grid list itself to a reasonable amount. To provide the user with a way to work with the entire grid list, offer navigation to a separate list report containing all items.

For all of the three options mentioned above, we recommend providing a search, and if feasible, sort and filter capabilities for the grid list in the object page. Grouping should be avoided.

For more information on the use of grid lists within the object page, see Object Page – Tables.

Properties

sap.f.GridList

The following additional properties are available for the grid list:

• The property: inset adds a margin on all sides of the grid list.
• The property: headerText is a simple way to set the title for the grid list. However, this excludes the following:
  • A separate toolbar
  • variantManagement
• 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 grid list.
• The property: includeItemInSelection uses a click on the whole item to select the corresponding item if the grid list is in a selection mode. This competes with other settings like “Navigation” or “Active” and should therefore not be used in combination with these two settings.
• The property: enableBusyIndicator automatically shows a busy indicator while data is loaded. (In contrast to the property: busy, where the application can control when the grid list is set to busy state)
• The property: modeAnimationOn does not have any effect. Do not use it.
• The property: showSeparators does not have any effect. Do not use this property.
• The property: swipeDirection does not have any effect. Do not use this property.
• The property: rememberSelections leaves items selected even if they are currently not 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 grid list to a busy state. While in busy state, the whole grid list 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 grid list has been set to this state. Use the default value.
• The property: visible shows the grid list (“true”) or hides it (“false”).
• The property: tooltip provides a tooltip for the whole grid list. Do not use it.

sap.f.GridListItem

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

• The property: selected allows an item to be selected programmatically.
• The property: counter shows a number on the right side of an item. This is used in cases like showing the number of subitems.
• 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 item. 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.

An analytical table contains a set of data that is structured in rows and columns. It provides several powerful possibilities for working with the data, including advanced grouping and aggregations.

In contrast to other tables, the analytical data binding used by the analytical table allows an aggregated number to be shown automatically in a cell. This means that a number in such a summarized cell is a total sum of several lines in the database.

Usage

Responsiveness

The analytical table is available for desktops and tablets, but not in smartphone sizes. It supports touch devices, but is not optimized for small screens.

If you use an analytical table for desktop use cases, note that you must implement a fallback solution for mobile and touch devices. This fallback solution does not need to support all use cases.

You could create a fallback by using a responsive table. However, a completely different solution, such as showing charts in a read-only case, might be more suitable.

Components

An analytical table does not consist of other elements. However, it is common to use a toolbar above the analytical table.

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

Behavior and Interaction

An analytical table is quite restricted in terms of its content, although it provides powerful features for working with the content.

Table Level

Single selection: One item in the analytical table can be selected. A row selector column is shown. (property: selectionMode = Single)

• Multiple selection: One or more items can be selected. The analytical table provides a column with checkboxes on the left-hand side. Clicking a checkbox toggles the state of the corresponding row from deselected to selected and back. The Shift key can be used to select a range. For multiple selection, you can choose between two variants.
  • Multi-toggle mode (property: selectionMode = MultiToggle)
  • Multi-selection plug-in (sap.ui.table.plugins.MultiSelectionPlugin)

  These variants behave differently when the user selects more items than are currently loaded in the front end.

  Multi-toggle

  In multi-toggle mode, you can offer a Select All checkbox to the left of the column header (property: enableSelectAll). Selecting this checkbox selects or deselects all items that are currently loaded in the front end. All other items are not selected/deselected. If the application data is stored in the back end, scrolling down further can reveal additional unselected items. The same can happen with range selections if not all items in the selected range have been loaded to the front end.

  Multi-selection plug-in

  If you use this plug-in instead of the multi-toggle selection mode, the behavior for range selection and Select All changes:

  • By default, a dedicated Deselect All button replaces the Select All checkbox. There is no default UI element for selecting all items.
  • You can set a limit for the number of items that can be selected (sap.ui.table.plugins.MultiSelectionPlugin, property: limit). This limit has the following effect:
    • The range that can be selected using the Shift key is limited to the specified number of items (default = 200). The table automatically scrolls back to the last selected item and a message can appear (sap.ui.table.plugins.MultiSelectionPlugin, property: enableNotification). Users can select more items by selecting additional ranges (the specified limit applies each time).
    • If the selection limit is set to 0, a Select All checkbox is shown. There is also no limit on the number of items that can be selected in a range. All selected items are loaded, which can lead to performance issues for large data sets.
  • If selected items are not already available in the front end, they are loaded automatically by the plug-in and set as selected.

Selection Behavior

An item can be selected in different ways, depending on the configuration of the analytical table (sap.ui.table.Table, property: selectionBehavior):

• Row: An item is selected by clicking the checkbox or the row. Use this option for multi-selection tables if clicking a row or a cell is not used for anything else.
• RowSelector: An item is selected only by clicking the checkbox in the selector cell. Use this option if clicking the row (or a cell inside the row) is used for something else, such as navigation.
• RowOnly: An item is selected only by clicking the row, and not using checkboxes in the selector cells. Use this for single-selection tables if clicking a row or a cell is not used for another purpose, such as navigation.

Compact, Cozy, and Condensed

Like all SAP Fiori controls, the analytical table is shown in compact mode on a desktop and in cozy mode on tablets.

For desktop devices, you can fit even more rows onto the screen by using the condensed mode together with the compact mode. This renders less white space for each item.

Note that the condensed content density must always be set in addition to the compact mode. Do not use the condensed mode on its own. Do not mix condensed with cozy. Doing so could lead to unpredictable or unwanted results, such as cozy-sized controls in condensed-sized containers, missing padding, and so on.

Note that neither compact mode nor condensed mode support touch interaction. Even on a desktop with a touch screen, users will have difficulty selecting rows or using controls inside the cells with their fingers.

For more information on cozy and compact modes, see content density.

Column Header

The column header provides the label for the corresponding column and access to the column header menu.

Columns are resized as follows:

• Mouse interaction: The user drags the separator line between two columns (sap.ui.table.AnalyticalColumn, property: Resizable). Double-clicking the line optimizes the column according to the length of the data currently visible and the label of the column header (sap.ui.table.AnalyticalColumn, property: Autoresizable).
• Touch interaction: The user clicks the column header to reveal two buttons: one to show the column header menu and one for resizing. The user drags the latter to resize the column.

When the user resizes a column, the adaptation of the column width depends on how the column widths are set:

• If column widths are set in pixel-based units (px, em, rem), the resized column is adapted and subsequent columns are moved accordingly. The width of all other columns is not affected.
  If all the columns together do not use up the full width of the table control, empty space is added. If all the columns together exceed the width of the table control, a scrollbar appears.
• If all column widths are set as percentages or “auto”, resizing one column automatically resizes one or more other columns. Resizing can also affect the position of the resized column. This option utilizes the full width of the table and ensures that no white space is added. A scrollbar appears only if all or most of the columns become to narrow. To avoid the side effect of undersized columns, you can set a minimum width per column. However, this minimum width is only taken into account if columns are resized automatically. End users can still reduce the column width to below the defined minimum (sap.ui.table.Column, properties: width, minWidth).

Users can rearrange columns by dragging the column header to another position (sap.ui.table.AnalyticalTable, property: enableColumnReordering).

Column Header Menu

For each column, a menu can contain the following menu items (sap.ui.table.AnalyticalColumnMenu, property: Visible):

• Sort Ascending/Descending (sap.ui.table.AnalyticalColumn, property: showSortMenuEntries)
• Free text filter (sap.ui.table.AnalyticalColumn, property: showFilterMenuEntries)
• Group
• Totals
• Freeze from the first to the last specified column (sap.ui.table.AnalyticalTable, property: enableColumnFreeze)

For each column, the menu can be replaced by an app-specific menu.

Sort

The column header menu can provide two sort options (sap.ui.table.AnalyticalColumn, properties: sortProperty, showSortMenuEntry):

• Sort Ascending
• Sort Descending

The user selects one of these options to sort the corresponding column accordingly (sap.ui.table.AnalyticalColumn, properties: sorted, sortOrder, sortProperty).

Filter

The column header menu can provide a search field for entering free text (sap.ui.table.AnalyticalColumn, properties: filterProperty, showFilterMenuEntries).

If the user enters a term in the input field and triggers the search by pressing ENTER when the focus is on the filter input field, the analytical table is filtered by the corresponding column and value (sap.ui.table.AnalyticalTable, properties: filtered, filterProperty, filterValue, filterOperator, sap.ui.table.AnalyticalColumn, property: filterType).

Note that the filter may return zero results, in which case, the table might be empty.

General recommendations for filtering:

• If filtering is a main use case, choose the filter bar or any other filtering UI over the built-in free text filter.
• Only use the free text filter if filtering is a secondary use case and if the filter bar is too heavy.

Group

The column header menu can provide the option to group by this column (sap.ui.table.AnalyticalColumn, property: sortProperty).

One group collects all items with the same value within the corresponding column.

If line items are grouped in a column, every group is provided with a collapsible or expandable group header (sap.ui.table.AnalyticalColumn, property: grouped). The header text consists of the column name and the value for the corresponding group (sap.ui.table.AnalyticalColumn, property: groupHeaderFormatter). Several grouping levels are possible.

The corresponding column can be hidden to avoid duplicates (sap.ui.table.AnalyticalColumn, property: showIfGrouped). Exercise caution when using this option since hiding the column changes the table layout and may lead to confusion.

Aggregation

The column header menu can provide the option to show or hide aggregation totals for this column.

Intermediate aggregations are shown at group level for the corresponding columns if the group contains more than one line item (sap.ui.table.AnalyticalColumn, property: summed).

The overall aggregation is shown at the bottom of the analytical table.

Freeze Columns

The column header menu can provide the option to freeze columns (sap.ui.table.AnalyticalTable, property: enableColumnFreeze). Selecting Freeze freezes all columns up to the one in which the operation was triggered (sap.ui.table.AnalyticalTable, property: fixedColumnCount).

When Freeze is triggered, the menu item changes to Unfreeze for the corresponding column.

Line Item Level

A line item contains a set of cells and provides options for selecting the item.

To prevent adverse side effects when scrolling vertically, all line items must have the same height.

(sap.ui.table.AnalyticalTable, property: rowHeight)

Drag and Drop

One or several items can be moved to other UI elements using drag and drop operations (sap.ui.table.AnalyticalTable, aggregation: dragDropConfig). While being dragged, the items are shown as ghost elements on the mouse cursor.

Drop targets can be on items, between items, or both (sap.ui.core.dnd.DropPosition). On a drop target, the mouse cursor changes to either a “copy”, “link”, “move”, or “none” cursor. “None” indicates that the dragged item cannot be dropped in the current position (sap.ui.core.dnd.DropEffect).

Drag and drop is only available on supporting browsers.

Cell Level

A cell provides one data point.

It can contain one of the following controls to display this data point:

• Text
• Label
• Object status
• Icon
• Button
• Input
• Date picker
• Select
• Combo box
• The following micro charts in size XS: Bullet, comparison, stacked bar
• Multi-combo box
• Multi-input field
• Checkbox
• Link
• Currency
• Rating indicator
• Progress indicator

While it is technically possible to also use other controls, doing so could lead to issues with alignment, condensed mode, screen reader support, and keyboard support.

If you use text, use only single-line text to keep the same row height. Truncate if necessary as this prevents adverse side effects when scrolling vertically (sap.m.Text, property: wrapping, value: false). Do not wrap.

Context Menu

You can attach a context menu (sap.m.Menu) to a table. The context menu gives users an alternative way to modify the focused elements by giving them access to context-specific functions.

When opened, the context menu gets the row and column context, except for special columns (such as the selection column) or special rows (like group headers). Context menus can be implemented for a specific table, row, or cell (not recommended for editable cells).

By default, the analytical table provides a context menu on the group headers (for example, Expand, Collapse, …). Otherwise, no default context menus are provided.

Context menus are opened by right-clicking (desktop), long press (mobile), the context menu key, or SHIFT+F10.

Be aware that using the context menu overrides the browser context menu, which can no longer be opened.

If a control inside a table is the “click target”, and the control also provides a context menu, the control context menu “wins”.

Guidelines

Data Density vs. Complexity

The analytical table can be used to display and work with large amounts of data. Unfortunately, the analytical table has a high data density and therefore conveys an immediate feeling of complexity.

Only show tables with a lot of data as a last resort. To make the data easier to read, you should instead try the following:

• Break down the data into manageable chunks and allow the user to navigate or drill down between them.
• Use charts with drilldown functionality until the amount of data is more manageable.

Try to avoid horizontal scrolling in the default delivery.

Try to minimize the number of columns, especially if there is a large number of rows.

Table Title

Implement the table title by using a title control in a toolbar.

Use a table title only if the title of the table is not indicated in the surrounding area.

Do not use a table title if it simply repeats text that is already above the table. For example:

• A pricing conditions table is the only control on a tab labeled Pricing Conditions.
• A section or subsection on an object page contains only one table.

Use a table title if you need the item count, table toolbar, or variant management. To avoid repeating text, feel free to use generic text as a table title, such as Items.
Exception: If the surrounding area contains the table title, and both the item count and toolbar can be added to the surrounding area, no additional table title is needed.
Example: An object page (sub-)section contains only one table. In this case, add the item count and the table toolbar to the (sub-)section header.

Multiple Selection

• We strongly recommend using the multi-selection plug-in. This ensures that all items selected using Select All or as part of a range are included – even if some items were not initially loaded in the front end. This is not the case if you use the multi-toggle option.
• Do not limit the range selection for the multi-selection plug-in unless you have to.
  • If the dataset is small and/or completely available in the front-end, set the limit property to 0 to enable the Select All option and allow users to select any range.
  • If you have a large dataset, set a limit on the number of selected items to avoid performance issues. Also bear in mind that some actions won’t be helpful if the dataset is too big (for example, a delete operation on 2 million database entries).
• When setting a limit, also display the corresponding message when the user selects more items at once than the limit allows (sap.ui.table.plugins.MultiSelectionPlugin, property: enableNotification).

In multiple selection mode (multi toggle), do not show checkboxes in the first data column in the default delivery to avoid confusion.

Loading Data

To indicate that the table is currently loading items, use the busy state (sap.ui.table.AnalyticalTable, property: busy). Do not show any items or text. As soon as the data is loaded, remove the busy state and show all items.

Columns – Best Practices

Minimize the number of columns. Avoid the need to scroll horizontally in the default delivery.

Optimize the column width for its initial visible content, including the column header texts. If this is not possible (for example, if showing the full texts would result in extremely wide columns), let the texts truncate. End users can change the width of the column to read the full text, as needed.

Maintain a constant column width and avoid adjusting it automatically when the content changes.

Always keep to one line of text. Do not wrap.

Column Headers – Best Practices

For each column, provide a label in the column header. In the default delivery, do not truncate the column header texts. Only let the text truncate if showing the full text would make the column too wide. Never wrap the text.

Content Alignment

For alignment of cell content, follow the guidelines below.

Right-align: numbers, except IDs, to ensure comparability of numbers and amounts.

Right-align amounts with currencies to the cell and align them in terms of their respective decimal points.

This ensures that amounts with different currencies are shown correctly, whether these currencies have 0, 2, or 3 decimals.

For aligning to the decimal point, use the sap.ui.uinified.Currency control.

Right-align dates and times.

This ensures comparability for most formats and locales.

Left-align status information.

Center-align icons.

Left-align micro charts.

Content Formatting

For strings with IDs, use one of the following:

• Show the ID in a separate column. Use this format if users need to sort, group, or filter by both the string and the ID.
• Show the ID in brackets after the corresponding string. In this case, sorting, filtering and grouping is available for either the string or the ID. Use this format only if users don’t need to sort, filter, and group by both values.

Truncation

Avoid truncation of typical content in the default delivery (sap.ui.table.AnalyticalColumn, property: width). However, since the columns are resizable, do not worry too much if truncation occurs as columns can still be enlarged if necessary.

To prevent adverse side effects when scrolling vertically, all line items must also have the same height. If you need to decide between truncation and different row heights, choose truncation. Do not wrap.

Number of Links

Are there too many links? Use subtle links to avoid a wall of links. Standard links are also emphasized more if they are surrounded by subtle links.

For example, a financial table consists of several columns with summarized cells. A summarized cell shows the total sum of several database entries. Each sum should be a link to a report that shows details about which database entries produce the total sum. The line item identifier should also be a link that provides more detail about the line item itself. Use a standard or emphasized link for the item identifier, and subtle links for the summarized cells.

Missing Value

If there is no value for a cell, leave it blank. Do not display text as N/A.

Numbering Items

In terms of numbering items:

• If the item number is more like an ID with regard to its description, use ID formatting as described above.
• In all other cases, use a separate column for the item number.

Status

For status information, use semantic colors on the foreground elements.

For status information on text, use an object status.

Micro Charts

Use only the following micro charts: Bullet, comparison, stacked bar. When using micro charts, use them in size XS.

Empty Tables

Avoid empty analytical tables. If necessary, provide instructions on how to fill the analytical table with data (sap.ui.table.AnalyticalTable, properties: noDataText, showNoData).

Examples:

• If a table is initially empty, provide at least a basic text:
  No items available.
  Overwrite this whenever a hint can be provided on how to fill the table with data.
• If a table is used together with a filter bar (as in the list report), and is initially empty, use the following text:
  To start, set the relevant filters.
• If a table is used together with a filter bar and the filter does not return results, use the following text:
  No data found. Try adjusting the filter settings.

Adapt the texts above if:

• The standard text is not precise enough for your use case (for example, a search is also offered, or only the search is offered).
• The standard text is misleading (for example, if the data is filled based on a master-detail pattern instead of filter settings).

Invalid State

To show an invalid state of the analytical table within the list report floorplan, show an overlay on the analytical table and the corresponding toolbar (sap.ui.table.AnalyticalTable, property: showOverlay). The overlay prevents user interactions.

Use this within the list report floorplan if filter settings have been changed but the analytical table has not yet been updated.

Item States

To show that a modified item contains an error, for example, within the global edit flow, add the string Contains errors in the Editing Status column and highlight the row accordingly. This string replaces the Modified string.

To show that an item is locked, add a transparent-style button with the corresponding icon and the text Locked by [name] in the Editing Status column.

To show that an item is in draft state, add a transparent-style button with the text Draft in the Editing Status column.

Show only one state at a time.

Numbers and Units

Show the unit of measurement in one of the following ways:

The number and unit are in the same cell. Do this if sorting, filtering, or grouping by the unit of measurement are not needed.

Use a currency control to display the concatenated string.

The number and unit are in separate columns. Do this if sorting, filtering, or grouping by the unit of measurement are a common use case.

Note that this column can be hidden or moved independently of the column containing the corresponding number. Therefore, be sure to have clear labels for both columns to communicate the dependency.

If the unit of measurement is the same for all rows, show the unit of measurement in the column header. Otherwise, show the unit of measurement within the row.

Drag and Drop

Drag and drop is “invisible” on the UI: users can’t see where dragging is available and where it isn’t. In addition, drag and drop is not accessible, since there is no generic keyboard interaction. Drag and drop is also not available on all browsers. For these reasons, provide it only in addition to existing (and visible) UI elements that fulfill the same purpose, such as (toolbar) buttons.

Do not use drag and drop for rearranging items in the analytical table. The analytical table is mainly used for grouping items and for calculating the totals per group and column. Moving items to another group also means that a value of the dropped item changes: because grouping is based on values in a column, the dropped item needs to take on the value of the target group for the corresponding column.

Example:
A table is grouped by availability. An item is moved from the group “Not Available” to the group “In Stock”. In this case, the moved item needs to change its availability to “In Stock” to match the target group. Because changing the value in this way doesn’t make sense, rearranging items is not permitted in analytical tables.

Context Menu

Use the context menu only to give users a quick way of accessing functions that are already available elsewhere (for example, as buttons in the toolbar). Don’t just offer actions in the context menu itself, as users might not realize that these actions are available at all.

The context menu can be triggered for the table, row, or cell. However, we do not recommend using context menus for cells: because the content of a cell is a different touch target than the cell itself, opening a cell context menu via touch is quite hard, even in cozy mode.

Do not combine context menus with condensed mode: editable controls fill the entire space inside a cell. Because of this, context menus cannot be opened at all with touch or mouse interaction.

Actions

Multiple Items

To trigger actions on multiple items, use a multiselection analytical table (sap.ui.table.AnalyticalTable, property: selectionMode, value: MultiToggle). Offer the corresponding actions in the table toolbar.

Do not offer action triggering on multiple items if the table is generally expected to have fewer than 10 items. In this case, try to use the responsive table instead of the analytical table.

Single Item

To trigger actions on a single item (sap.ui.table.AnalyticalTable, property: selectionMode, value: Single):

• Show the actions on the table toolbar.
• In rare cases, show the actions within the line item. One example would be an Add to Cart button in a shopping application. Since these actions are repeated in every line and thus use a lot of screen real estate, do this only for a maximum of one or two actions. Provide a separate column per action. Use a button, unless the action trigger belongs to a link. Hide the action in rows for which it is not applicable.

Single Cell

To trigger actions on a single cell, create the corresponding click event. Do not use the cell click event if the cell contains interactive controls, such as links.

To trigger navigation on line item level choose one of the following options:

• Use a link for the attribute that identifies the row. Clicking the link triggers the navigation.
• Add the RowActions column and show the navigation indicator (  ) at the end of the row. The navigation arrow triggers the navigation.

Special case: Multi-selection in a master-detail scenario
When a multi-selection table is used in a master-detail scenario, it is not clear which item was last opened (for example, which item is currently shown in the second column of a flexible column layout). In this case, you can display a “navigated” indicator to show which item is currently open.

Use the RowActions column only for one or both of the following actions:

• Navigate to details page ( )
• Delete ( )

The RowActions column does not provide a column header text. It is fixed and will not scroll away. Users also cannot personalize this column.

Single Cell

For triggering actions on a single cell, create the corresponding click event. Do not use the cell click event if the cell contains interactive controls, such as links.

Add Items

For adding items, place an Add or Create text button on the table toolbar.

• Use Create if the button adds a brand new item that doesn’t yet exist on the database.
• Use Add if the item already exists and is merely added or assigned to the current object.

Show new items as the first item of the table, with a visual highlight at the beginning of the row.

For more details, see the guidelines for managing objects (including subarticles).

Enabling/Disabling Actions

To indicate if an action can be applied to the current selection:

• Enable the action if it always works, regardless of whether or not items are selected.
• Enable the action if it can be applied to all selected items.
• Enable the action if it can be applied to some of the selected items. If the action is triggered, show a message that informs the user how many items will be affected. Let users choose whether to apply the action anyway or cancel the action.
• Only disable the action if it can be applied to none of the selected items.

For more details, see UI Element States.

If the action was applied and the items are still available, keep them selected.

Editable Content

View Settings

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

Sort

To display the current sort state, an icon is shown in the column header of the last sorted column. This icon indicates the sort direction (sap.ui.table.AnalyticalColumn, properties: sorted, sortOrder, sortProperty).

For the default sort setting, sort by the column that identifies the row, which is usually the first column in default delivery. Use a meaningful sort order, such as alphabetical order for text, numeric order for numbers, or chronological order for dates.

The descending sort order must always be the exact reverse of the ascending sort order.

For each column, provide a meaningful sort order. For example:

• Sort text alphabetically
• Sort numbers by their value
• Sort status information by the severity of the status:
  • Ascending: Sort status information from positive to negative, with neutral last.
  • Descending: Sort status information from negative to positive, with neutral first.

• • Ascending with different values per severity level: Sort status information from positive to negative, with neutral last. Sort different values within a severity level (semantic color) alphabetically.
  • Descending with different values per severity level: Sort status information from negative to positive, with neutral first. Sort different values within a severity level (semantic color) alphabetically.

Filter

To display the current filter state, an icon is shown in the column header of the filtered column (sap.ui.table.AnalyticalColumn, properties: filtered, filterProperty, filterValue, filterOperator, defaultFilterOperator, filterType).

Group

To display the current group state, group headers are shown. Show the following text in the group header (sap.ui.table.AnalyticalColumn, properties: grouped, showIfGrouped, groupHeaderFormatter):

[Label of the grouped column]: [Grouping value]

If there is no grouping value, show the following text:
[Label of the grouped column]: (Not Available)

This is the case if you have a group of items that don’t have a value for the grouped column.

Set the property collapseRecursive to “false” to keep subgroups expanded even after collapsing and expanding the parent group.

On non-touch devices, right-clicking a group header opens the group header menu. On touch devices, the same menu is opened by using the menu icon on the right side of a group header.

The group header menu provides several options:

• Show/Hide: Shows or hides the column in the table layout, although it is grouped.
• Ungroup: When the user ungroups a column, the corresponding group headers disappear. If the column was hidden, it is shown again as a separate column.
• Ungroup All: The columns are shown again.
• Move Up: Rearranges the grouping levels hierarchy by moving the selected group above the group that is one level higher up in the hierarchy.
• Move Down: Rearranges the grouping levels hierarchy by moving the selected group below the group that is one level lower down in the hierarchy.
• Collapse Level: Collapses all groups on the corresponding grouping level.
• Collapse All: All groups are collapsed.

In general:

• Offer grouping on objects and attributes.
• Do not offer grouping on measures.
• If appropriate, offer reasonable grouping by default, but do not exaggerate. As a rule of thumb, use up to three group levels.
• Provide more space for the first column. Grouping needs an indent per group level. Extra space in the first column prevents truncated text.

Aggregate

To display the current aggregation state, the total sum of the corresponding column is shown at the bottom of the table.

If items are grouped, an intermediate sum is shown:

• At the bottom of each group if the group is expanded.
• In the group header if the group is collapsed.

(sap.ui.table.AnalyticalColumn, property: summed)

When aggregating amounts with different units of measurement, show an asterisk (*) in the aggregation rows.

When sorting an aggregated column, only the leaf nodes of a group are included by default. If each measure column currently displays a single unit of measurement, the order of the groups can also be affected.

For example:
Let’s assume that table items are grouped by Country/Region and aggregated by Total Net Amount. If you sort the Total Net Amount column in descending order, the largest total net amount is shown first.

In general:

• Offer aggregation on measures, but not on objects or attributes.
• Avoid aggregations on the first three columns for the default delivery. As soon as grouping is used together with aggregations, collapsing a group shows the aggregation on the group header. This conflicts with the group name.
• Where appropriate, offer reasonable aggregation by default.

Personalization

Only offer personalization if you need more columns than a tablet screen can display at any one time, which is usually five.

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

Add, Remove, and Rearrange Columns

To add, remove, or rearrange columns, use one of the following:

• The table personalization dialog: It offers some simple settings for column layout. Use this if you have only a few columns to choose from and/or you use the view settings dialog.
• The p13n dialog: Besides various complex view settings, it also provides settings for column layout. Use this if you have a large number of columns to choose from and/or you use this dialog anyway for view settings.

In both cases, trigger the dialog via the settings button in the table toolbar.

You can also use drag and drop to rearrange columns (sap.ui.table.Table, property: enableColumnReordering). If you allow rearranging via drag and drop as well as via a dialog, keep both places in sync.

Resize Columns

Resizing columns works differently on touch and non-touch devices.

• Non-touch devices: Drag and drop the column separator on the right side of the column. Double-clicking the column separator optimizes the width of the column for the data currently loaded into the front end, which is usually about 100 rows.
• Touch devices: Clicking the column header reveals two buttons: one for opening the column header menu, another one for resizing the column. Drag and drop this second button to resize the column.

Freeze Columns

For freezing columns, offer the setting in the column header menu (sap.ui.table.AnalyticalTable, property: enableColumnFreeze).

Selecting Freeze on a column freezes all columns from the first one to the one where Freeze is selected. On this column, the menu entry changes from Freeze to Unfreeze.

Tables in Object Pages

In the object page, we advise against using analytical, grid, and tree tables. Instead, use a responsive table and offer navigation to a list report with the table types mentioned above.

For more information on the use of tables within the object page, see the Tables section of the Object Page article.

Export to Spreadsheet

On the table toolbar, apps can provide a menu button for exporting table data to a spreadsheet. For the export, use the export to spreadsheet function.

Properties

sap.ui.table.AnalyticalTable

The following additional properties are available for the analytical table:

• The property: width defines the width of the analytical table.
• The property: rowHeight defines the height of each row in the analytical table. Since the height required is calculated automatically by the analytical table, this property is only needed rarely.
• The property: columnHeaderHeight defines the height of the column headers. Since the height required is calculated automatically by the analytical table, this property is only needed rarely.
• The property: columnHeaderVisible can be used to hide the column headers. Always show the column headers.
• The property: showColumnVisibilityMenu provides an additional entry in the column header menu that allows columns to be shown or hidden. In SAP Fiori, columns are shown and hidden via the table personalization dialog or via the table personalization dialog. Do not use this property.
• The property: columnVisibilityMenuSorter is used for sorting the columns inside the column header menu if showing and hiding columns is provided in the menu. In SAP Fiori, columns are shown and hidden via the table personalization dialog or via the table personalization dialog. Do not use this property.
• The property: visibleRowCount defines the height of the analytical table. Show as many rows as fit on the screen.
• The property: visibleRowCountMode defines whether the height of the analytical table is fixed or automatically calculated based on the space provided by the underlying container. For automatic calculation, make sure that all rows have the same height.
• The property: minimumAutoRowCount defines the minimum number of rows that must be shown if the property: visibleRowCountMode is set to “auto”. Show at least three to five rows.
• The property: firstVisibleRow defines the first row shown in the visible area of the analytical table. The analytical table is scrolled accordingly.
• The property: allowColumnReordering is deprecated. Use the property: enableColumnReordering instead.
• The property: editable does not have a visible effect. Please do not use it.
• The property: threshold is used for optimizing lazy loading of items. In most cases, the default value is appropriate.
• The property: enableGrouping is experimental and does not have a meaningful effect on the analytical table. Do not use it.
• The property: sumOnTop shows additional aggregation values on the group header, even if the group is expanded. Do not use it.
• The property: enableCustomFilter changes the filter entry in the column header menu from an edit box to Filter…. Selecting this entry throws an event that apps can react to, for example, by opening a dialog. In general, you should choose the built-in filter over your own implementation. Specifically, keep filtering via the column header menu simple, while offering more advanced options via the table personalization dialog.
• The property: enableBusyIndicator has not yet been fully implemented. Do not use it.
• The property: title adds a line of text on top of the analytical table. Do not use it. To add a title to the table, use a toolbar.
• The property: footer adds a short text at the bottom of the table.
• The property: Busy sets the analytical table to busy state. While in busy state, the whole table cannot be used and items cannot be read due to an overlay.
• The property: Tooltip does not have an effect. Do not use it.
• The property: alternateRowColors displays the rows with alternating background colors (“banded rows”). Do not use it.

sap.ui.table.AnalyticalColumn

The following additional properties are available for the analytical column:

• The property: leadingProperty is used for data binding.
• The property: inResult is used for data binding.
• The property: visible defines whether a column is shown or hidden.
• The property: name defines the name shown in the column header menu for showing and hiding columns. In SAP Fiori, columns are shown and hidden via the table personalization dialog or via the table personalization dialog. Please do not use this property.
• The property: headerSpan defines whether one column header is used for one or several columns. To prevent adverse side effects, always use one column header for only one single column. Please do not use this property.
• The property: Tooltip does not have an effect. Please 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.

The view settings dialog helps users to sort, filter, or group data within a (master) list or a table. The dialog is triggered by icon buttons in the table toolbar.

Usage

We recommend making each feature (sort, filter, group) available as a separate button in the table toolbar (see Button Placement below). Each button then triggers a separate dialog. If specifically required, you can combine the dialogs into one with a segmented button acting as tabs to switch between the sort, filter and group options. Note: In a combined dialog, the Reset button resets all tabs.

Use the view settings dialog if:

• You need to allow the user to sort line items in a manageable list or table (up to about 20 columns).
• You need to offer custom filter settings in a manageable list or table (up to about 20 columns).
• You need to allow the user to group line items in a manageable list or table (up to about 20 columns).

Do not use the view settings dialog if:

• You have complex tables (more than about 20 columns).
• You need to rearrange columns within your table. Use the table personalization dialog instead.
• You need very specific sort, filter, or column sorting options within complex tables. Use the P13n dialog instead.

Button Placement

Use distinct icon buttons for the sort, filter, and group settings. Place the icons in the following order:   (Sort),  (Filter),   (Group).

Do not place sort, filter, or group buttons in the footer toolbar if they refer to a table.

For detailed information about where to place the sort, filter, and group buttons, see Sort, Filter, Group (Generic) in the table toolbar article.

Sort, Group, and Filter a List

You can also offer the view setting features for a list.

Responsiveness

Behavior and Interaction

The sort, filter, and group features can all be applied to a table simultaneously.

Sort

The sort dialog shows two groups of sort settings. The first group offers general Ascending and Descending sort options. The second group offers attributes that fit the use case, such as Product, Supplier, Weight, or Price. The attributes can match the table columns, but because a table column can also contain several data points, such as “Name” and “Surname”, the attributes allow an attribute to be shown for each data point.

Users can select attributes using the radio buttons. Clicking OK closes the dialog and shows the table items in the selected order.

If a combined dialog is used, the first tab is the sort feature.

Filter

The filter dialog can offer a single filter selection list, a multi-filter selection list, or a category list. The category list provides an overview, and allows the user to drill down to detailed filter selection lists.

In a combined view settings dialog, filtering is on the second tab.

Filter Selection List – Single Selection

The dialog offers one single-selection list with radio buttons to select a filter. This list is useful for offering a list of preconfigured filters for a specific use, such as “Products with numbers ‘starting between 100 and 200’ with status ‘in stock’ and color ‘green’”.

Filter Selection List – Multi-Selection

You can also offer a filter selection list as a multi-selection list. In this case, the user can choose, for example, all “green” and “red” products.

Category List

The filter dialog shows a single list of general filter categories depending on the use case, like Price or Height. The user chooses a category by clicking the list item, such as Price. As this is a simple drilldown, these categories do not offer radio buttons. The dialog shows a list of filter settings in the Price category. Optional filters here, such as Less than 100, depend on the use case. The user chooses a filter setting by selecting one of the radio buttons offered in this list. Clicking OK closes the dialog and shows the table items filtered by the selected attribute. The infobar shows which filter has been set.

Free-Form Apps

You can also customize your own filter UIs, for example, to support date picking.

Filter Values

Filters can correspond to single values as well as groups, such as “<100.00 EUR”.

Filter Reset

The refresh button on the filter tab resets all filter settings.

Removing Filters

Be sure to offer an entry such as Not Filtered in a single-selection list. This enables users to remove a set filter.

Group

The group dialog shows two groups of attributes. The first group offers a general Ascending or Descending order, which allows the user to select the order in which the defined groups appear. The second group offers attributes that fit the use case, such as Type or Supplier.

You can also offer an attribute like Price to group data in a table.

Via radio buttons or checkboxes, users can choose attributes. Clicking OK closes the dialog and shows the table with items grouped below headers.

In a combined view settings dialog, the group feature is the third tab.

Naming Group Headers

Guidelines

For opening the dialog from a table toolbar, use different buttons for each function (sort, filter, group). With each button, open the View Settings dialog with just the corresponding tab.

If possible, give users the option not to filter or group. For sorting, this is only necessary if the use case calls for an unsorted list. In all three cases, show this option as the first entry in the list of criteria (remember to include the brackets):

• (Not Sorted)
• (Not Filtered)
• (Not Grouped)

Resources

A tree table contains a hierarchical set of data structured in rows and columns and grouped into nodes. The analytical table (also know as ALV) can provide additional details in several non-hierarchical columns per line item. 

Usage

Trees are used to display and work with large amounts of hierarchical data. They have a high data density and therefore convey an immediate feeling of complexity. Ideally, you should only show trees with a lot of hierarchical data as a last resort. Try the following instead:

• Break down the data into manageable chunks and allow the user to navigate or drill down between them.
• Use charts with drilldown functionality until the amount of data is more manageable.

Responsiveness

A tree table is available for desktops and tablets, but not in smartphone sizes. It supports touch devices, but is not optimized for small screens.

If you use a tree table, note that you have to implement a fallback solution for small screens. This fallback solution does not need to support all use cases.

Possible fallback solutions are as follows:

• Use navigation to different pages instead of a tree structure. This works well for structures that are no more than four levels deep.
• Remove levels until only one or two remain. Replace a single-level tree by a table, and a two-level tree by a grouped table or a split-screen layout.
• Use filtering instead of a tree structure.

You can try to create a fallback based on these ideas, but a completely different solution, such as showing charts in a read-only case, might be more appropriate.

Types

Like all SAP Fiori controls, the tree table is shown in compact mode on a desktop and in cozy mode on tablets.

For a desktop, you can also display even more rows on the same screen height by adding the condensed mode in addition to the compact mode. This renders less white space for each item.

Note that the condensed content density has always to be set in addition to compact. Do not use condensed on its own. Do not mix condensed with cozy. Doing so could lead to unpredictable and / or unwanted results, e.g. cozy sized controls in condensed sized containers, missing padings, etc.

Note that neither compact mode nor condensed mode can be interacted with via touch. Even on a desktop with a touch screen, users will have difficulty selecting rows or using controls inside the cells when using their fingers.

Furthermore, condensed mode is not available for Internet Explorer 9. If condensed mode is to be used, please provide a fallback.

For more information on cozy and compact modes, see content density.

Compact Mode

Condensed Mode

In rare cases, show actions within the line item. An example would be an Add to Cart button in a shopping application. 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.

Behavior and Interaction

Selection

The tree provides the following possibilities:

No selection: Items cannot be selected. (property: selectionMode = None)

Single selection: One item in the tree table can be selected. A row selector column is shown. (property: selectionMode = Single)

Multiple selection: One or more items can be selected. The tree table provides a column with checkboxes on the left-hand side. Clicking a checkbox toggles the state of the corresponding row from deselected to selected and back. The Shift key can be used to select a range.

For multiple selection, you can choose between two variants.

• Multi-toggle mode (property: selectionMode = MultiToggle)
• Multi-selection plug-in (sap.ui.table.plugins.MultiSelectionPlugin)

These variants behave differently when the user selects more items than are currently loaded in the front end.

Multi-toggle

In multi-toggle mode, you can offer a Select All checkbox to the left of the column header (property: enableSelectAll). Selecting this checkbox selects or deselects all items that are currently loaded in the front end. All other items are not selected/deselected. If the application data is stored in the back end, scrolling down further can reveal additional unselected items. The same can happen with range selections if not all items in the selected range have been loaded to the front end.

Multi-selection plug-in

If you use this plug-in instead of the multi-toggle selection mode, the behavior for range selection and Select All changes:

• By default, a dedicated Deselect All button replaces the Select All checkbox. There is no default UI element for selecting all items.
• You can set a limit for the number of items that can be selected (sap.ui.table.plugins.MultiSelectionPlugin, property: limit). This limit has the following effect:
  • The range that can be selected using the Shift key is limited to the specified number of items (default = 200). The table automatically scrolls back to the last selected item and a message can appear (sap.ui.table.plugins.MultiSelectionPlugin, property: enableNotification). Users can select more items by selecting additional ranges (the specified limit applies each time).
  • If the selection limit is set to 0, a Select All checkbox is shown. There is also no limit on the number of items that can be selected in a range. All selected items are loaded, which can lead to performance issues for large data sets.
• If selected items are not already available in the front end, they are loaded automatically by the plug-in and set as selected.

Selection Behavior

An item can be selected in different ways, depending on the configuration of the tree table (sap.ui.table.Table, property: selectionBehavior):

• Row: An item is selected by clicking the checkbox or the row. Use this option for multi-selection tree tables if clicking a row or a cell is not used for anything else.
• RowSelector: An item is selected only by clicking the checkbox in the selector cell. Use this option if clicking the row (or a cell inside the row) is used for something else, such as navigation.
• RowOnly: An item is selected only by clicking the row, and not using checkboxes in the selector cells. Use this for single-selection tree tables if clicking a row or a cell is not used for another purpose, such as navigation.

Set the property collapseRecursive to “false” in order to keep the selection on subnodes even after collapsing and expanding the root node.

Drag and Drop

One or several items can be repositioned within a table or moved to other UI elements using drag and drop operations (sap.ui.table.TreeTable, aggregation: dragDropConfig). While being dragged, the items are shown as ghost elements on the mouse cursor.

Drop targets can be on items, between items, or both (sap.ui.core.dnd.DropPosition). On a drop target, the mouse cursor changes to either a “copy”, “link”, “move”, or “none” cursor. “None” indicates that the dragged item cannot be dropped in the current position  (sap.ui.core.dnd.DropEffect).

Drag and drop is only available on supporting browsers.

Column Header Menu

Column Handling

Show/Hide Columns

Columns can be shown and hidden. If the tree column is hidden, the following column is the tree column.

Rearrange Columns

The user rearranges columns by dragging and dropping the corresponding column header. The tree column is always the first column and cannot be dragged.

Resize Columns

Columns are resized as follows:

• Mouse interaction: The user drags the separator line between two columns (sap.ui.table. Column, property: Resizable). Double-clicking the line optimizes the column according to the length of the currently visible data and the label of the column header (sap.ui.table.Column, property: Autoresizable). Note that auto-resizing works only if the cells in this column contain one of the following controls: text, label, link, or input.
• Touch interaction: The user clicks or taps the column header to reveal two buttons: One to show the column header menu, and one for resizing. The user drags the latter to resize the column.

Context Menu

Cell Content

The tree is traditional in that each cell can contain only one data point in one single line.

Apart from plain read-only text, cells can contain the following:

• Text
• Label
• Object status
• Icon
• Button
• Input
• Date picker
• Select
• Combo box
• The following micro charts in size XS: Bullet, comparison, stacked bar
• Multi-combo box
• Multi-input field
• Checkbox
• Link
• Currency
• Rating Indicator
• Progress indicator

While it is technically possible to also use other controls, doing so could lead to issues in regards to alignment, condensed mode, screen reader support, and keyboard support.

If you use text, use only single-line text to keep the same row height. Truncate if necessary as this prevents adverse side effects when scrolling vertically (sap.m.Text, property: wrapping, value: false).

Guidelines

Filtering

What exactly needs to stay or be removed is highly dependent on the kind of structure and data your tree table displays. For many trees, the following approach works well if you want to apply filters only to the leaves of a tree:

• Remove all leaves that don’t fit the filter criteria
• Remove empty nodes

Where nodes need to be filtered, keep the following in mind:

• A node may or may not fit the filter criteria.
• A node can contain items (nodes and/or leaves) that fit the filter criteria.

Because of this, the results might contain more nodes than those that are relevant for the filter criteria.

Sorting

First of all: Is sorting meaningful in your tree? If so, decide on a meaningful default sort order.

If sorting is meaningful, is it meaningful on all levels? Or does the tree structure need to be stable? In the latter case, sort only leaves, but not nodes.

To display the current sort state, an icon is shown in the column header of the most recently sorted column. This icon indicates the sort direction (sap.ui.table.Column, properties: sorted, sortOrder, sortProperty).

The descending sort order must always be the exact reverse of the ascending sort order. For each column, provide a meaningful sort order. For example:

• Sort text alphabetically
• Sort numbers by their value
• Sort status information by the severity of the status:
  • Ascending: Sort status information from positive to negative, with neutral last.
  • Descending: Sort status information from negative to positive, with neutral first.

• • Ascending with different values per severity level: Sort status information from positive to negative, with neutral last. Sort different values within a severity level (semantic color) alphabetically.
  • Descending with different values per severity level: Sort status information from negative to positive, with neutral first. Sort different values within a severity level (semantic color) alphabetically.

Loading Data

To indicate that the table is currently loading items, use the busy state (sap.ui.table.TreeTable, property: busy). Do not show any items or text. As soon as the data has been loaded, remove the busy state and show all items.

Initital Display

Think of the initial expand / collapse state of a tree: If your structure contains many items on the root level, it might make sense to collapse the whole tree in the beginning.

In contrast, if the main items to work with are displayed on a deeper level (e.g. the parent nodes are just some kind of categorization), the tree should be expanded up to the first level where the needed items appear.

Selection

• We strongly recommend using the multi-selection plug-in. This ensures that all items selected using Select All or as part of a range are included – even if some items were not initially loaded in the front end. This is not the case if you use the multi-toggle option.
• Do not limit the range selection for the multi-selection plug-in unless you have to.
  • If the dataset is small and/or completely available in the front-end, set the limit property to 0 to enable the Select All option and allow users to select any range.
  • If you have a large dataset, set a limit on the number of selected items to avoid performance issues. Also bear in mind that some actions won’t be helpful if the dataset is too big (for example, a delete operation on 2 million database entries).
• When setting a limit, also display the corresponding message when the user selects more items at once than the limit allows (sap.ui.table.plugins.MultiSelectionPlugin, property: enableNotification).

• In multiple selection mode, do not show checkboxes in the first data column in the default delivery to avoid confusion.

Empty Table

Try to avoid empty tables. If necessary, provide instructions on how to fill the tree table with data.

Remove the item count in the table title if there are zero items.

Add Items

For adding items, place an Add or Create text button on the table toolbar.

• Use Create if the button adds a brand new item that doesn’t yet exist on the database.
• Use Add if the item already exists and is merely added or assigned to the current object.

Show new items as the first item of the tree table or node:

• If nothing is selected, add the new item to the root.
• If a single node is selected, add the new item to the selected node.
• If a single leaf is selected, add the new item as child of this leaf. The original selected item becomes a node.

If your tree doesn’t support adding items to the root, selected node, or selected leaf, disable Create or Add for the corresponding levels.

Disable Create or Add if more than one item is selected.

For more details, see the guidelines for managing objects (including subarticles).

Enabling/Disabling Actions

To indicate if an action can be applied to the current selection:

• Enable the action if it can be applied to all selected items.
• Enable the action if it can be applied to some of the selected items. If the action is triggered, show a message that informs the user how many items will be affected. Let the user choose whether to apply the action anyway or cancel the action.
• Only disable the action if it can be applied to none of the selected items.

For more details, see UI Element – States.

If the action was applied and the items are still available, keep them selected.

Columns

Minimize the number of columns. Avoid the need to scroll horizontally in the default delivery. In the first column, show the hierarchical data, which should identify the line item. Choose the name over the ID, but if both are needed, show the name first, then the ID.

The tree 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.ui.table.Column, property: width).

If you define the column width in pixels or rems, resizing a column affects only the width of this specific column. Reducing the browser window size results in a scrollbar. After resizing a column, a scrollbar appears if the width of the table is not enough to show all columns. If the columns use less space than is available, white space appears on the right side of the last column.

If you define the column width as a percentage, resizing one column affects the width of several or all columns. Text becomes truncated when the browser window size is reduced. This is done to make sure that all columns together fill the space of the table. A scrollbar appears only in case the automatic change of the column widths is not enough to display all columns. To avoid the side effect of undersized columns, a minimum width can be set per column. Please be aware that this minimum width is only taken into account if columns are automatically resized. End users are still able to reduce the column width below the provided minimum. (sap.ui.table.Column, properties: width, minWidth)

If you define the column width as “auto”, the behavior is the same as for “percentage”. In contrast to percentage, “auto” distributes the columns equally.

To decide on how to set the column width (pixel/rem/em vs. percent/auto), keep the following tips in mind:

• For tables with only 2 to 3 columns, use pixel-based units. This ensures that on wide screens the values in the columns are not spread over the whole screen, which improves readability of line items.
• For tables with many columns, where a horizontal scrollbar is usually needed, use pixel-based units. This avoids unintended side effects when resizing columns.
• For all other tables, use whatever fits your case better.

Be cautious with mixing columns with pixel-based and percentage-based widths. While this can be helpful in some cases, it could also cause even more unintended side effects when resizing a column. When using percentage-based widths for one or more columns, think of the possibility to not allow end users to resize columns at all.

Alignment of Cell Content

Align column headers according to their cell content:

• Texts are left-aligned.
• Numbers (except for IDs), dates, and times are right-aligned.
• Icons are centered.
• Micro charts are left-aligned.

In addition, align amounts with currencies to the decimal point. You can do this with the sap.ui.unified.Currency control.

Note that most currencies have two digits after the decimal point, but there are exceptions, for example:

• The Tunisian dinar has three digits.
• The Japanese yen has no digits.

In tree tables with mixed currencies, all amounts still have to be aligned to the decimal point.

To enable positive and negative values to be identified more easily, position the minus sign to the right of the number. It is placed in the same position in every row.

For more information, see currency.

Formatting Cell Content

• Note that there are different locale formats, so show dates, times, and numbers in the correct format for the user’s language/country.
• If you show both a a text and an ID, consider the requirements for sorting, grouping and filtering:
  • If users need to sort, group, and/or filter by both text and ID, show the text and ID in two separate columns.
  • If users only need to sort, group, and/or filter by either text or ID, show the ID in parentheses after the corresponding text.
• If the unit of measurement is the same for all rows, show the unit of measurement in the column header. Otherwise, show the unit of measurement within the row.
• If you want to let users sort, filter, or group by amount and by unit of measure independently, put both in different columns. If you combine them in one column, offer only sorting, filtering, and grouping by amount.

Tree vs. Table

Trees are more complex than tables due to their hierarchical view. Users tend to have more problems finding items in hierarchical views than in flat lists, except where the hierarchical view is natural. By natural we mean that every child node should be part of only one parent, and this relationship between the child and parent is clear and well known.

When you use trees, you should choose broad hierarchies over deep hierarchies. Deep hierarchies make finding items more complicated. So try to reduce hierarchical levels where possible, especially if the hierarchy is not natural. Ideally, a tree should have a maximum of four levels, the first two of which should contain the most important items.

You can use the following methods to reduce hierarchy levels:

• Avoid single root nodes. A single root node is often used to provide a Select All feature. Since the tree control provides an extra space for a Select All feature, the root node is not usually needed.
• When you use only two levels, choose a grouped table or grouped ALV over a tree table control. Expand all groups for the default delivery.
• Container nodes at the top level can usually be replaced by tabs or value pickers.
• Eliminate unnecessary mid-level containers, for example, by combining redundant ones.
• Exercise care when using a tree due to its overall complexity. The hierarchical structure of the data does not necessarily mean that a tree control is required.

Design Concepts

The tree table can be used to display large amounts of hierarchical data. Unfortunately, tree tables have a high data density and therefore convey an immediate feeling of complexity. Ideally, tree tables with large amounts of data should only be shown if there is no other option. You should instead try the following:

• Flatten the data. A list, table, or ALV is still complex, but less so than a tree table.
• Break down the data into manageable chunks. Allow the user to navigate or drill down between them.
• Use charts with drilldown functionality until the amount of data is more manageable.

Try to avoid horizontal scrolling in the default delivery.

Navigation

To trigger navigation on line item level, choose one of the following options:

• Use a link for the attribute that identifies the row. Clicking the link triggers the navigation. This is the preferred option.
• Add the RowActions column and show the navigation arrow (  ) at the end of the row. No column header text is required. The navigation column is fixed and will not scroll away. Users also cannot personalize this column. The navigation arrow triggers the navigation.
  Do not use the RowActions column for actions other than navigation and deletion.

Special case: Multi-selection in a master-detail scenario
When a multi-selection table is used in a master-detail scenario, it is not clear which item was last opened (for example, which item is currently shown in the second column of a flexible column layout). In this case, you can display a “navigated” indicator to show which item is currently open.

Examples of Incorrect and Correct Usage

• Consider persisting the layout settings. When a user reopens the app, show the tree table with the same column sizes, column order, and view settings as last defined by this user.
• Use the Select All feature only if it makes sense. Note that selecting a lot of data also takes time and might not be appropriate for all use cases. For example, a delete operation on two million database entries might not be very helpful in many cases.
• Set the property collapseRecursive to “false” in order to keep the selection on subnodes even after collapsing and expanding the root node.

Empty Tree Tables

Avoid empty tree tables. If necessary, provide instructions on how to fill the tree table with data (sap.ui.table.TreeTable, properties: noDataText, showNoData).

Examples:

• If a tree table is initially empty, provide at least a basic text:
  No items available.
  Overwrite this whenever a hint can be provided on how to fill the tree table with data.
• If a tree table is used together with a filter bar (as in the list report), and is initially empty, use the following text:
  No filters set. To start, enter your search and filter settings and run the search.
• If a tree table is used together with a filter bar and the filter does not return results, use the following text:
  No items found. Check the search and filter settings.

Adapt the texts above if:

• The standard text is not precise enough for your use case (for example, no search is offered, only the search is offered).
• You are using the live search (no Go button in the filter bar). In this case, leave out “run the search”.
• The standard text is misleading (for example, if the data is filled based on a master-detail pattern instead of search and filter settings).

Drag and Drop

Drag and drop is “invisible” on the UI: users can’t see where dragging is available and where it isn’t. Also, because there is no generic keyboard interaction, drag and drop isn’t accessible. Moreover, drag and drop is not available on all browsers. For these reasons, offer drag and drop only in addition to existing (and visible) UI elements that fulfill the same purpose. For example, offer (toolbar) buttons for moving or for copying and pasting items.

If you offer drag and drop for rearranging items within a tree table, use the following options:

• For dropping items as a child, use whole nodes as drop targets (sap.ui.core.dnd.DropPosition.On).
• For dropping items on the same level, use the space between items as drop targets (sap.ui.core.dnd.DropPosition.Between).
• If you want to allow users to drop items as a child or sibling, offer both drop targets (sap.ui.core.dnd.DropPosition.OnOrBetween).

This provides better feedback on where the item will be inserted. Show the “move” mouse cursor (sap.ui.core.dnd.DropEffect.Move).

Do not combine rearranging items within one level and sorting. If you really need to do so, make sure there is a dedicated sort criterion for the user-defined sort order, and only offer options for rearranging items if this sort order is set.

Moving items from one node to another can be combined with sorting without any issues.

Visible Alternatives to Drag and Drop

Depending on the functionality you need, use one or more of the following alternatives:

• To move items up or down within a node:
  Use the  Move Up and  Move Down buttons on the toolbar. These buttons move the selected items until the first selected item can’t be moved up / the last selected item can’t be moved down any further.
  Depending on your tree, this can make sense for both leaves and nodes, only for leaves, or only for nodes. When moving a node, move the whole node and (if applicable) all its children up or down to the next position within the parent node.
  Always make sure that when the user moves an item in one direction and then moves it back, the order is the same as it was before.
  Do not combine the option to move items up and down with sorting.
• To move items to another node:
  Use Copy and Paste buttons on the toolbar.
  Alternatively, offer a Move To button. Clicking Move To opens a dialog that shows all the nodes of the tree, but no leaves. Selecting an item in this dialog closes the dialog and moves the corresponding items to the selected node.
• To change the level of an item:
  In some trees, such as document structures, users can change the level of an item without affecting the level of parent or child items. In this case, use left and right arrow buttons (   ).

Context Menu

Use the context menu only to give users a quick way of accessing functions that are already available elsewhere (for example, as buttons in the toolbar). Don’t just offer actions in the context menu itself, as users might not realize that these actions are available at all.

The context menu can be triggered for the table, row, or cell. However, we do not recommend using context menus for cells: because the content of a cell is a different touch target than the cell itself, opening a cell context menu via touch is quite hard, even in cozy mode.

Do not combine context menus with condensed mode: editable controls fill the entire space inside a cell. Because of this, context menus cannot be opened at all with touch or mouse interaction.

Tables in Object Pages

In the object page, we advise against using analytical, grid, and tree tables. Instead, use a responsive table and offer navigation to a list report with the table types mentioned above.

For more information on the use of tables within the object page, see the Tables section of the Object Page article.

Export to Spreadsheet

On the table toolbar, apps can provide a menu button for exporting table data to a spreadsheet. For the export, use the export to spreadsheet function.

Resources

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

Within SAP Fiori, we distinguish between tree tables and trees. Both usually allow the user to display and work with a hierarchical set of items. While tree tables are usually used for more complex data, trees are generally used for rather basic data. Trees are mostly used in the master list for a master-detail scenario using the flexible column layout and in popovers or dialogs. In certain use cases, they can also be used in the dynamic page layout.

In the case of tree tables and trees, items that contain additional items are called nodes, while items that do not contain any other items are called leaves. If available, a single topmost node is called a root node. Apart from the hierarchical structure of its nodes and leaves, a tree is quite similar to a list.

Usage

Use the tree if:

• You need to display the key identifier of hierarchically structured items (for example in the first column of the flexible column layout).
• Selecting one or more items out of a set of hierarchically structured items is a main use case.
• The hierarchy has a restricted number of levels (up to about 12, depending on the content) and items (around 200).
• You want to have only one implementation for all devices.

Do not use the tree if:

• The main use case is to select one item from a very small number of non-hierarchical items, without viewing additional details. In this case, a select or combo box might be more appropriate.
• Items are not structured hierarchically. Use a list instead.
• The hierarchy turns out to have only two levels. In this case, use a grouped list.
• The hierarchy turns out to be just a categorization based on several details of the item. In this case, an analytical table provides multi-level grouping. Note that the analytical table is not fully responsive. It is only available for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.
• You need to display very deep hierarchies with additional data per item. In this case, use a tree table. Note that the tree table is not fully responsive. It is only available for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.
• The structure contains more than around 200 items. In this case, use the tree table. It is optimized for large item sets and provides better performance. Note that the tree table is not fully responsive. It is only available for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.
• You need an overview of a large amount of data. In this case, use a chart.

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

Responsiveness

Layout

Components

Line Item Level

Expandable and Collapsible Nodes

Navigating

Editing Items

Clicking an Item

Context Menu

Drag and Drop

Guidelines

Tree vs. List

Broad vs. Deep Hierarchies

Design Concepts

The tree can be used to display hierarchical data. Unfortunately, trees convey an immediate feeling of complexity. Ideally, show trees only if there is no other option. You should instead try the following:

• Flatten the data. A list is still complex, but less so than a tree. A combo box might also fit in some use cases.
• When only two levels are needed, a grouped list control can be used. This works well, where group nodes are used for categorizing their children and where the group nodes themselves do not need to be selectable.
• Break down the data into manageable chunks. Allow the user to navigate or drill down between them.
• Use charts with drilldown functionality until the amount of data is more manageable.

Design for Performance

To optimize performance, we recommend showing no more than 200 items at once in the tree. For larger datasets (up to 1,000 items), use the “growing” mechanism to limit the number of displayed items, and make sure that users can filter the data.

Title

Loading Data

Initial Display

Think of the initial expandable/collapsible state of a tree. If your structure contains many items on the root level, it might make sense to collapse the whole tree in its initial state.

In contrast, if the most important items are displayed on a deeper level (if, for example, the parent nodes are simply a kind of categorization), the tree should be expanded up to the first level where the most important items immediately appear.

Content Formatting

Highlighting Items

Item States

Show only one state at any one time.

Actions

To trigger actions on items, show the actions on a toolbar above the tree. Do not offer action triggering on multiple items if the tree is expected to have fewer than 10 items in most cases.
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 a toolbar above the tree. For example: Add, Collapse All, Expand All, …

To trigger a default action on the entire item, use the “Active” or “DetailAndActive” item type (sap.m.TreeItem / 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. Selection and expanding/collapsing a node does not trigger the event, but are handled by the tree. 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 master.

Add Items

For adding items, place an Add or Create text button on the toolbar.

• Use Create if the button adds a brand new item that doesn’t yet exist on the database.
• Use Add if the item already exists and is merely added or assigned to the current object.

Show new items as the first item of the tree or node:

• If nothing is selected, add the new item to the root.
• If a single node is selected, add the new item to the selected node.
• If a single leaf is selected, add the new item as a child of this leaf. The original selected item becomes a node.

If your tree doesn’t support adding items to the root, selected node, or selected leaf, disable Create or Add for the corresponding levels.

Disable Create or Add if more than one item is selected.

For more details, see guidelines for managing objects (including subarticles).

Editing Items

To edit items, add an Edit button either in-line on the toolbar above the tree. Triggering the button either opens a dialog or navigates to an editable details page.

For mass editing:

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

For more details, see mass editing.

Context Menu

Use the context menu only to give users a quick way of accessing functions that are already available elsewhere (for example, as buttons in the toolbar).

Don’t just offer actions in the context menu itself, as users might not realize that these actions are available at all.

Drag and Drop

Sorting

Resources

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.

A line item contains several data points sorted into columns. A data point refers to a unit of information, such as a number, a text, a unit of measurement, and so on, which can be used to form the content of a table, form or other control. One data point is usually displayed by a control, such as a text, object status, or input field. A control can display more than one data point, for example, by concatenating text.

In contrast to traditional tables, a “cell” of the responsive table is not limited to displaying only one control, and therefore a single cell can present far more than one data point.

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. By contrast, the analytical table supports only a very limited set of controls.
• The focus is 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: