Use the analytical table (ALV) 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 an 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 have to work on more than 1,000 rows. In this case, the analytical table is easier to handle. In contrast to the responsive table, the architecture of the analytical table is optimized for handling large numbers of items. Note that an 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.
• Comparing items is a major use case. In this case, an analytical table might be more appropriate than a responsive table. In the analytical 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 an 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.

Do not use the analytical table (ALV) 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:

  • You need to provide a total sum for one column. You can also add totals to the responsive table.
  • 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 purchase orders and purchase requisitions).
  • 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.

• 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. Examples include the list in a list-detail scenario or an attachment list. Pay attention to the layout of the list item to ensure that it has a pleasant appearance.

• You cannot provide an analytical binding on the technical side. In this case, a grid table will do the work. However, please note that the grid table doesn’t provide grouping, aggregation options, and is not responsive.

• Data needs to be structured in a hierarchical manner. In this case, a tree table might be more appropriate. Although the analytical table can have several grouping levels, it is not as flexible when nodes at several levels contain children. Note that neither the tree table nor the analytical table are 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 like HBox or VBox.

• You need read-only or editable field-value pairs. Use a form instead. The analytical table is not optimized for form-like input navigation.

Analytical table (ALV) shown on a desktop

Analytical table (ALV) shown on a tablet

Scroll

An analytical table allows horizontal and vertical scrolling (sap.ui.table.AnalyticalTable, property: navigationMode, value: Scrollbar).

You can add any number of line items to the analytical table, which is known as “lazy loading”.

To prevent adverse side effects when scrolling vertically, all line items must have the same height (sap.ui.table.AnalyticalTable, property: rowHeight).

The analytical table is optimized to allow faster scrolling within the first 1000 items.

Scroll bar

Analytical table without item selection

Analytical table with single selection

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.

Analytical table in compact mode

Analytical table in condensed mode - More items on the same screen real estate

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.
• Keyboard interaction: Users can increase the width of the focused column header with Shift+Right and decrease it with Shift+Left.

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). Keyboard interaction: Ctrl+Left and Ctrl+Right move the focused column header one position in the corresponding direction.

Column header

Opening the column header menu on touch devices

Columns do not use up the available space

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.

Column header 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).

Sort settings in column header menu

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.

Free text filter in column header menu

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.

Group setting in column header menu

Group headers and the corresponding columns are shown – The relevant data is duplicated

Group headers shown, the corresponding column hidden – No duplicates

Aggregation

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

Overall aggregation for a single unit of measure

When the column contains values for more than one unit of measure, a Show Details link is displayed in a row at the bottom of the table, for example, when the column contains multiple currencies.

The Show Details link opens a popover that lists the totals for each unit of measure.

Overall aggregation for multiple units of measure via the 'Show Details' link

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.

Freeze setting in column header menu

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)

Line item

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.

Drag and drop

Whole item as drop target

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.

Cell

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

Analytical table with context menu

Single Selection

For single-selection list-detail scenarios within the flexible column layout, do not show an additional “navigated” indicator.

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.

Don't

Do not add checkboxes to the first column

• Never disable the selection checkbox. If an action can’t be performed on a specific item, inform the user after the corresponding action has been triggered. For more information, see Enabling/Disabling Actions.

To indicate that the table contains items with errors or warnings, show a message strip above the table. On the message strip, provide information about errors or warnings. When issues are solved or when new issues appear, update the message strip accordingly.

To indicate an error in a single row, see Item States below.

For details on displaying errors, warnings, and other messages, see Message Handling.

Table containing errors and warnings

Left-alignment of text

Right-alignment of numbers

Right-align amounts with currencies to the cell and align their respective decimal points.

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

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

Alignment to the decimal point

Right-align dates and times.

This ensures comparability for most formats and locales.

Right-alignment of dates

Left-align status information

XS micro charts in condensed mode

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.

Emphasized link

• 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 parentheses after the corresponding string. In this case, you must opt for one criterion for sorting, filtering, and grouping – either the string or the ID. This option is then used for all sort, filter and group actions and can’t be changed later by the user. Use this format only if users don’t need to sort, filter, and group by both the string and the ID.

Text and ID in two columns – Allows sorting, filtering, and grouping for both

If displayed as a link, use only the string as the link, not the ID

Text and ID in one column – Sorting, filtering, and grouping are available for either the text or the ID, but not for both

If displayed as a link, use the whole text as the link

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.

Optimize column width for typical content, not all content

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.

Emphasized links, links, subtle links, and text

Missing Value

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

Leave empty fields blank

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.

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

Semantic colors on text

Micro Charts

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

Micro charts in an analytical table

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 list-detail pattern instead of filter settings).

Provide meaningful instructions

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.

Analytical table with invalid data

To show that an item has been modified, for example, within the global edit flow, add the string (Modified) in an additional column with the label Editing Status.

In the default delivery, add a column directly behind the key identifier.

A modified item

A modified item with an error

A locked item

Item in draft state

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

For amounts, use a currency control to display the concatenated string.

Number and unit of measurement in one cell

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.

Number and unit of measurement in two columns

Use drag and drop only in addition to existing visible UI elements

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.

Don't

Do not use drag and drop for rearranging items in the analytical table

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 ( :icon-slim-arrow-right) at the end of the row. The navigation arrow triggers the navigation.

Special case: Multi-selection in a list-detail scenario When a multi-selection table is used in a list-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 (:icon-navigation-right-arrow )
• Delete (:icon-sys-cancel )

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

Navigate to details page

There are several ways to show Sort, Filter, and/or Group settings:

• Column header menu: In all cases, show the corresponding settings in the column header menu.
• View settings dialog: Simple and more flexible with regard to filter settings. No advantage for sorting. Allows the user to ungroup grouped columns.tables with a medium amount of items.
• Table personalization dialog: Provides complex options for sorting items by several levels and allows the user to ungroup grouped columns. It also provides a query-builder-like approach for filter settings. The complexity of the options is also its downside. Use the table personalization dialog for tables with a large number of items.
• If filtering is a main use case, use the filter bar. In this case, avoid offering additional filter settings on the table. If you do, the filter settings on the table work only on the result set provided by the filter bar.

Always be careful when synchronizing the settings in the dialog with the settings from the column header menu.

Trigger the dialogs in one of the following ways:

• View settings dialog: Provide several buttons, one for each of these view settings. Each button opens the view settings dialog on the corresponding page.
• Table personalization dialog: Provide a settings button, which opens the table personalization dialog containing all pages.

Use only the view settings you really need. For example, do not offer grouping if it does not support your use case.

Column header menu with view settings

Table toolbar with triggers for view settings dialog

Table toolbar with trigger for table personalization dialog

Sort

Always sort the table in a meaningful way when it first loads. In most cases, this means sorting by the column that identifies the row. This is usually the first column in the default delivery.

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.

Column, sorted ascending

Column, sorted descending

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

Column, filtered

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.

Group headers, several levels

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.

Group header menu

Group header on touch devices

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.

Frozen column

Highlight Items

To show that an item needs attention, you can display a highlight indicator 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.AnalyticalTable, aggregation: rowSettingsTemplate)

Highlighted items

'Export to Spreadsheet' menu button