Tables

SAP Fiori elements supports several table types.

The following table types are available:

Responsive tables

Responsiveness is optimized for mobile use. Line items can be viewed with no scrolling or with only vertical scrolling, regardless of the display width.
Grid table

This is a desktop-centric table type that allows scrolling in both directions. It can handle a large number of items and columns.
Tree table

This table type provides a comprehensive set of features to display hierarchical data. For more information, see Tree Tables.
Analytical table

This table type contains data structured in rows and columns. It provides several powerful options for working with data, including advanced grouping and aggregations.

In contrast to other tables, the analytical data binding used by the analytical table automatically displays an aggregated number in a cell.

The table representation that suits the service is chosen by default during the app creation. The responsive table is set as the default table type, but the analytical table is selected as the default table type for analytical services.

You can change the default table type to suit your needs.

For more information about the table types, see Tables: Which One Should I Choose?. For more information about defining the UI.LineItem annotation that describes the table, see Defining Line Items.

The table control uses page mechanisms while loading data. It contains the following:

Layout management
A toolbar with actions rendered as text icons, for example, Personalize.
Application-specific actions rendered as text buttons, for example, Copy, Approve, and Delete.
An indication of draft status (only for list report tables)
A display of items locked by other users (only for list report tables)

Default Selection Mode for Rows in Tables

By default, the table generated by the template uses the single-selection mode. End users select an item from the table to trigger a custom action, such as Validate, which then returns the results for the selected item.

Applications can change the single-selection mode to multi-selection mode. For more information, see Enabling Multiple Selection in Tables.

Context Menu in Tables

Tables in list report, object page, and analytical list page applications support a context menu. The context menu is available as a default option and appears only when end users perform a right-click on a row or a set of selected rows. This menu displays all context-dependent actions that appear on the table toolbar. Additionally, an option to open the selected row or rows in a new browser tab or window is available within the menu. Inline actions are not included as part of context menu actions.

Note

When the table is configured to navigate to an object page in edit mode by setting openInEditMode to true, the Open in New Tab option is not shown in the context menu. For more information, see Navigation to an Object Page in Edit Mode.

When implementing custom actions, you can use the extensionAPI.getSelectedContexts API to identify the rows associated with the context menu.

Note

You must use the extensionAPI.getSelectedContexts API only within synchronous code blocks. For more information, see Defining Custom Actions.

Showing or Hiding Columns Based on Importance and Available Screen Size in Responsive Tables

You can show or hide columns of the list report and object page tables depending on the screen width for situations like the following:

The browser window is small.
The application is running on a devise with a smaller screen.
You are using the flexible column layout.

The value of the UI.Importance annotation for the field determines which columns are hidden or moved when the screen size is reduced.

You can use the UI.Importance annotation to set the importance for table columns as follows:

High: Columns with a High importance setting are visible on all screen sizes. When the screen size is reduced, the columns shift to a pop-in area but remain visible on the screen.
Low: Columns with a Low importance setting are hidden on the screen when the screen size is reduced.
None (default) and Medium: Columns with None (default) and Medium importance settings are hidden automatically when the screen size is reduced.

For columns with Low, None, and Medium settings, the Show More per Row / Show Less per Row buttons appear in the table toolbar only if there's at least one hidden column. When the end user clicks the Show More per Row button, the hidden column information appears as a text in the pop-in area. To hide the pop-in area, click the Show Less per Row button.

Note

Columns that have no importance setting (None) but containing a semantic key are considered of High importance (also when used in a FieldGroup).
Columns with a Low importance setting are hidden first on smaller screens, followed by columns with the settings None (default) and Medium.

Sample Code

XML annotation

Sample Code

<Annotations Target="STTA_PROD_MAN.STTA_C_MP_ProductSalesPriceType">
     <Annotation Term="UI.LineItem">
          <Collection>
               <Record Type="UI.DataField">
                    <PropertyValue Property="Value" Path="PriceDay" />
                    <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High" />
               </Record>
               <Record Type="UI.DataField">
                     <PropertyValue Property="Value" Path="TargetPrice" />
                     <!--This will be treated with default importance "None" which is same as "Medium"-->
               </Record>
               <Record Type="UI.DataField">
                     <PropertyValue Property="Value" Path="DiscountPriceTarget" />
                     <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/Low" />
               </Record>
          </Collection>
     </Annotation>
</Annotations>

Note

Starting from SAPUI5 1.87, SAP Fiori elements automatically calculates the default column width and provides an option to resize the column width in responsive tables. This is the default behavior. Having fewer columns in a table increases the free space available on the right side of the table.

Hiding Table Columns Using the `UI.Hidden` Annotation

You can hide the table columns or specific fields within the table column in an analytical list page, list report, and object page. To hide the entire table column, set the UI.Hidden annotation value for any field as static true. To hide a specific field of a table column, set the UI.Hidden annotation value as a path-based value, and the fields for which UI.Hidden evaluates to true are hidden. For more information, see Hiding Features Using the UI.Hidden Annotation.

Note

If the path-based value for UI.Hidden evaluates to true for all rows, then only the fields are hidden and not the entire column.

DataField Records in Tables

Sample Code

XML Annotation

Sample Code

<Annotation Term="UI.LineItem">
    <Collection>
        <Record Type="UI.DataFieldForAnnotation">
            <PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#multipleActionFields" />
            <PropertyValue Property="Label" String="Sold-To Party" />
            <Annotation Term="UI.Hidden" Path="Delivered" />
        </Record>
    </Collection>
</Annotation>

Sample Code

ABAP CDS Annotation

Sample Code

@UI.lineItem: [
  {
    hidden: true,
    label: 'Sold-To Party',
    type: #AS_FIELDGROUP, 
    hidden: #('Delivered'),
    valueQualifier: ' multipleActionFields'
  }
]
TEST;

Sample Code

CAP CDS Annotation

Sample Code

LineItem                                        : {
        $value             : [
        {
            $Type             : 'UI.DataFieldForAnnotation',
            Target            : '@UI.FieldGroup#multipleActionFields',
            Label             : 'Sold-To Party',
            ![@UI.Hidden] : Delivered
        }
]

Searching for Rows in a Table on an Object Page

In responsive, grid, and analytical tables, if the table is searchable (that is, if an entity set is used for which sap:searchable is set as true), a search field is displayed. You can search for particular rows in the table.

Defining the Column Width Using an Annotation

SAP Fiori elements automatically calculates the default width of columns containing texts based on the MaxLength property of the field defined in the metadata. The lower limit is set to 3 rem and the upper limit is set to 20 rem.

To customize the width of a column defined in a line item, use the UI annotation com.sap.vocabularies.HTML5.v1.CssDefaults. For more information, see Setting the Default Column Width.

Copying Multiple Rows and Range Selections

End users can copy multiple rows as well as ranges of rows and columns to the clipboard. The selected content (rows or ranges) can then be pasted to another application such as Microsoft Excel, Microsoft Word, or to another SAP Fiori elements table. Note that the copying from a table functionality doesn't split the content for fields that contain an amount together with a unit of measure or currency, as well as for fields that contain a value and its description. After copying, end users need to adapt such content before pasting it to an SAP Fiori elements table.

Note

When using custom columns in SAP Fiori elements for OData V4, the cell content is the properties listed in the property array of the custom column definition. For more information, see Extension Points for Tables.

To select a range with the mouse, click and hold while dragging to make a selection. As tables can have cells with editable fields, these fields automatically gain focus upon cell selection. To prevent this, press CTRL on Microsoft Windows or CMD on macOS before selecting a cell with the mouse. Keyboard shortcuts are also available as an alternative for cell selection.

Key Combination	Behavior
`Space`	Selects the cell that the focus is set on. If used inside a selection, removes the selection.
`Shift` `Arrow keys`	Adjusts an existing selection. If used outside a selection, creates a new selection.
`Shift` `Space`	Transforms the current selection into a row selection, based on the selection mode applied to the table.
`Control` `Space`	Expands the selection to all cells in a column (up to the range limit).
`Control` `Shift` `A`	Clears the selection.

For more information about pasting data to tables and the expected format, see Copying and Pasting from External Applications to Tables.

Optimizing Data Loading Using the `scrollThreshold` Parameter

As end users scroll within grid tables, tree tables, or analytical tables, the application dynamically loads additional records from the back-end system. By default, it loads 300 additional records while scrolling. You can modify this value by configuring the scrollThreshold parameter. For more information, see API Reference.

For more information about configuration in OData V2, see the Configuring the scrollThreshold Parameter to Optimize Data Loading subsection in the Additional Features in SAP Fiori elements for OData V2 section of this topic.

For more information about configuration in OData V4, see the Configuring the scrollThreshold Parameter to Optimize Data Loading subsection in the Additional Features in SAP Fiori elements for OData V4 section of this topic.

Additional Features in SAP Fiori Elements for OData V2

Smart Multi-Input Control

Smart multi-input is automatically rendered as a column in responsive and grid tables if a 1:N relationship exists in the association for the given column.

To configure smart multi-input fields on an object page, see Using the Multi-Input Field on the Object Page.

Vertical Alignment of Responsive Tables

To define the vertical alignment for a responsive table, set the tableColumnVerticalAlignment manifest property under the settings of sap.ui.generic.app to the values Top, Middle, or Bottom.

Showing or Hiding the Copy to Clipboard Button

By default, the Copy to Clipboard button is displayed in the table toolbar. However, you can also configure the visibility of the Copy to Clipboard button by defining the copy settings in the manifest.json file. If copy is set to true, the Copy to Clipboard button is shown in the table toolbar. If copy is set to false, the Copy to Clipboard button is hidden from the table toolbar.

Sample Code

Settings for the List Report Page

"sap.ui.generic.app": {
    "pages": {
        "ListReport|<EntitySetName>": {
            "entitySet": <EntitySetName>,
            "component": {
                "name": "sap.suite.ui.generic.template.ListReport",
                "settings": {
                    "tableSettings": {
                        "copy": false
                    }
                }
            }
        }
    }
}

Sample Code

Settings for the Analytical List Page

"sap.ui.generic.app": {
    "pages": {
        "ListReport|<EntitySetName>": {
            "entitySet": <EntitySetName>,
            "component": {
                "name": "sap.suite.ui.generic.template.AnalyticalListPage",
                "settings": {
                    "tableSettings": {
                        "copy": true
                    }
                }
            }
        }
    }
}

Sample Code

Settings for the Object Page

"sap.ui.generic.app": {
    "pages": {
        "ListReport|<EntitySetName": {
            ...
            ...
            "pages": {
                "ObjectPage|<EntitySetName": {
                    "entitySet": "<EntitySetName",
                    "component": {
                        "name": "sap.suite.ui.generic.template.ObjectPage",
                        "settings": {
                            "sections": {
                                "SalesOrderItemsID": {
                                    "navigationProperty": <NavigationProperty>,
                                    "entitySet": <NavigationEntitySetName>,
                                    "tableSettings": {
                                        "copy": true
                                    }
                                }
                            },
                            "tableSettings": {
                                "copy": false
                            }
                        }
                    }
                }
            }
        }
    }
}

Note

The copy settings defined for a table at the section level have a higher priority than the copy settings defined for the table at the object page level.

Hiding Columns Using the `UI.Hidden` Annotation on an Object Page

Table columns in the object page can be hidden using the UI.Hidden annotation either with a boolean value true or with a path referring to the property of the same entity or parent instance. If it points to a property of the parent entity, then the entire column is hidden. In the following example, to_Product is the navigation property pointing to the parent entity:

Sample Code

XML Annotation

Sample Code

<Annotation Term="UI.LineItem">
	<Collection>
		<Record Type="UI.DataField">
			<PropertyValue Property="Value" Path="SoldToParty" />
			<Annotation Term="UI.Hidden" Path="to_Product/Delivered" />
		</Record>
	</Collection>
</Annotation>

Note

You must not use the UI.Hidden annotation with a path for columns that support grouping, sorting, or filtering; this can lead to UX inconsistency as these operations are performed in the back end.
If the path for UI.Hidden defined on the table points to a field of its parent entity and it evaluates to true, then the entire column is hidden.

Context Menu in Tables

The list report and object page tables have a context menu listing the actions.

Note

In the following cases, the Open in New Tab or Window option isn't available in the context menu:

The list report or object page extension controller implements the onListNavigationExtension method.
The list report table is configured in direct edit mode. For more information about direct edit mode, see Navigation to an Object Page in Edit Mode.

You can exclude the custom actions from the context menu by using excludeFromContextMenu as shown in the following sample code:

Sample Code

"sap.ui.controllerExtensions": {
    "sap.suite.ui.generic.template.ListReport.view.ListReport": {
        "controllerName": "STTA_MP.ext.controller.ListReportExtension",
        "sap.ui.generic.app": {
            "STTA_C_MP_Product": {
                "EntitySet": "STTA_C_MP_Product",
                "Actions": {
                    ...
                    "CopyWithNewSupplier": {
                        "id": "CopyWithNewSupplier",
                        "text": "Copy with new Supplier",
                        "press": "onCopyWithNewSupplier",
                        "excludeFromContextMenu": true
                    }
                    ...
                }
            }
        }
    }
}

Configuring the `scrollThreshold` Parameter to Optimize Data Loading

To configure the scrollThreshold parameter, you can use the UI adaptation option. For more information, see Adapting the UI: List Report and Object Page.

Additional Features in SAP Fiori Elements for OData V4

By default, a responsive table is used. However, you can change the table type by configuring specific settings in the manifest.json file.

Analytical tables aren't supported on draft-enabled entities.

Excluding Fields from Table Personalization

You can exclude specific fields from the table personalization dialog in the list report and object page by setting the availability property of the column to hidden. For more information, see Enabling Table Personalization.

Handling of Search Restrictions

Note

The analytical table works differently compared to grid tables and responsive tables. For more information about the configuration of different table types, see Setting the Table Type.

The search restriction for a table is first looked up in the parent entity (using NavigationRestrictions at the parent entity, with the NavigationProperty pointing to the association of the table entity).

Navigation Restrictions at Parent Entity

Sample Code

XML Annotation (non-containment scenario): /SalesOrderManage/_Items

Sample Code

<Annotations Target="com.c_salesordermanage_sd.Container/SalesOrderManage">
   <Annotation Term="Capabilities.NavigationRestrictions">
      <Record>
         <PropertyValue Property="RestrictedProperties">
            <Collection>
               <Record>
                  <PropertyValue Property="NavigationProperty" NavigationPropertyPath="_Items" />
                  <PropertyValue Property="SearchRestrictions">
                     <Record>
                        <PropertyValue Property="Searchable" Bool="false" />
                     </Record>
                  </PropertyValue>
               </Record>
            </Collection>
         </PropertyValue>
      </Record>
   </Annotation>
</Annotations>

Sample Code

ABAP CDS Annotation

No ABAP CDS annotation sample is available. Use the local XML annotation.

Sample Code

CAP CDS Annotation (non-containment scenario)

Sample Code

entity SalesOrderManage @(
   Capabilities:{
      NavigationRestrictions:{
         RestrictedProperties:[{
            NavigationProperty : _Items,
            SearchRestrictions : {Searchable : false}
         }]
      }
   }
)

In a containment scenario (for example, where the main entity set is from a parameterized entity), you can maintain the annotations as shown in the following sample code:

Sample Code

XML Annotation (containment scenario): /Customer/Set/_PartnerItems

Sample Code

<Annotations Target="sap.fe.test.MyService.EntityContainer/Customer">
   <Annotation Term="Capabilities.NavigationRestrictions">
      <Record>
         <PropertyValue Property="RestrictedProperties">
            <Collection>
               <Record>
                  <PropertyValue Property="NavigationProperty" NavigationPropertyPath="Set/_PartnerItems" />
                  <PropertyValue Property="SearchRestrictions">
                     <Record>
                        <PropertyValue Property="Searchable" Bool="false" />
                     </Record>
                  </PropertyValue>
               </Record>
            </Collection>
         </PropertyValue>
      </Record>
   </Annotation>
</Annotations>

Sample Code

ABAP CDS Annotation

No ABAP CDS annotation sample is available. Please use the local XML annotation.

Sample Code

CAP CDS Annotation (containment scenario)

Sample Code

service MyService {
    @Capabilities.NavigationRestrictions.RestrictedProperties : [{
        $Type              : 'Capabilities.NavigationPropertyRestriction',
        NavigationProperty : 'Set/_PartnerItems',
        SearchRestrictions : {Searchable : false}
    }]
}

Restrictions Directly at Child Entity

If no search restriction is defined at the parent entity using NavigationRestriction, the search restriction defined directly on the table entity set (child entity) is considered.
Sample Code
XML Annotation (non-containment scenario): /SalesOrderManage/_Items
Sample Code
Hidden
<Annotations Target="com.c_salesordermanage_sd.Container/SalesOrderItem"> <Annotation Term="SAP__capabilities.SearchRestrictions"> <Record> <PropertyValue Property="Searchable" Bool="false" /> </Record> </Annotation> </Annotations>
Sample Code
ABAP CDS Annotation
No ABAP CDS annotation sample is available. Use the local XML annotation.
Sample Code
CAP CDS Annotation (non-containment scenario)
Sample Code
Hidden
entity SalesOrderItem @( Capabilities:{ SearchRestrictions : {Searchable : false} } )
In a containment scenario (for example, where the main entity set is from a parameterized entity), you can maintain the annotations as shown in the following sample code:
Sample Code
XML Annotation (containment scenario): /Customer/Set/_PartnerItems
Sample Code
Hidden
<Annotations Target="SAP__self.Container/ItemPartner"> <Annotation Term="SAP__capabilities.SearchRestrictions"> <Record> <PropertyValue Property="Searchable" Bool="false" /> </Record> </Annotation> </Annotations>
Sample Code
ABAP CDS Annotation
No ABAP CDS annotation sample is available. Use the local XML annotation.
Sample Code
CAP CDS Annotation (containment scenario)
Sample Code
Hidden
entity ItemPartner @( Capabilities:{ SearchRestrictions : {Searchable : false} } )

Freezing Table Columns

You can freeze the first columns of a table to keep them visible when scrolling the table horizontally. To do this, add the frozenColumnCount parameter in the manifest.json file and specify how many columns to freeze.

Sample Code

manifest.json

"_Item/@com.sap.vocabularies.UI.v1.LineItem": {
    "tableSettings": {
        "type": "GridTable",
        "frozenColumnCount": 3,
        …
        },
        ...
    }
}

Note

This option isn't available for the responsive table.

Calculating the Column Width

By default, the column width is calculated based on the type of the content. You can include the column header while calculating the column width by configuring the widthIncludingColumnHeader setting in the manifest.json file. This setting can be defined at the table level or at the column level. The widthIncludingColumnHeader setting defined at the column level has a higher priority than the widthIncludingColumnHeader setting defined at the table level.

Sample Code

manifest.json

"controlConfiguration": {
     "@com.sap.vocabularies.UI.v1.LineItem": {
            "tableSettings": {
                   "widthIncludingColumnHeader":true
            },
            "columns": {
                   "DataField::commonProperty": {
                        "widthIncludingColumnHeader":false
                   }
            }
     }
}

Showing or Hiding the Copy to Clipboard Button

By default, the Copy to Clipboard button is displayed in the table toolbar if the selection mode, such as single selection or multi selection, is configured for the corresponding table. However, you can also configure the visibility of the Copy to Clipboard button by defining the disableCopyToClipboard settings in the manifest.json file as shown in the following sample code:

Sample Code

manifest.json

    "sap.ui5": {
        "routing": {
            "targets": {
                "SalesOrderManageList": {
                    "options": {
                        "settings": {
                            "controlConfiguration": {
                                "@com.sap.vocabularies.UI.v1.LineItem": {
                                    "tableSettings":{                                         
                                       "disableCopyToClipboard": true                                     
                                  }
                               }
                            }
                        }
                    }
                }
            }
        }
    }

For more security-related information, see Security Configuration.

The Table building block also supports the copy to clipboard option. For more information, see API Reference.

Configuring the `scrollThreshold` Parameter to Optimize Data Loading

You can configure the scrollThreshold parameter in the manifest.json file as shown in the following sample code:

Sample Code

manifest.json

"sap.ui5": {
        "routing": {
            "targets": {
                "SalesOrderManageList": {
                    "options": {
                        "settings": {
                            "controlConfiguration": {
                                "@com.sap.vocabularies.UI.v1.LineItem": {
                                    "tableSettings":{   
                                        "type": "GridTable",                                      
                                       "scrollThreshold": 200                                     
                                  }
                               }
                            }
                        }
                    }
                }
            }
        }
    }

Tables

Tables

Default Selection Mode for Rows in Tables

Context Menu in Tables

Showing or Hiding Columns Based on Importance and Available Screen Size in Responsive Tables

Hiding Table Columns Using the `UI.Hidden` Annotation

DataField Records in Tables

Searching for Rows in a Table on an Object Page

Defining the Column Width Using an Annotation

Copying Multiple Rows and Range Selections

Optimizing Data Loading Using the `scrollThreshold` Parameter

Additional Features in SAP Fiori Elements for OData V2

Smart Multi-Input Control

Vertical Alignment of Responsive Tables

Showing or Hiding the Copy to Clipboard Button

Hiding Columns Using the `UI.Hidden` Annotation on an Object Page

Context Menu in Tables

Configuring the `scrollThreshold` Parameter to Optimize Data Loading

Additional Features in SAP Fiori Elements for OData V4

Excluding Fields from Table Personalization

Handling of Search Restrictions

Freezing Table Columns

Calculating the Column Width

Showing or Hiding the Copy to Clipboard Button

Configuring the `scrollThreshold` Parameter to Optimize Data Loading

In this section:

Related information

Tables

Tables

Default Selection Mode for Rows in Tables

Context Menu in Tables

Showing or Hiding Columns Based on Importance and Available Screen Size in Responsive Tables

Hiding Table Columns Using the UI.Hidden Annotation

DataField Records in Tables

Searching for Rows in a Table on an Object Page

Defining the Column Width Using an Annotation

Copying Multiple Rows and Range Selections

Optimizing Data Loading Using the scrollThreshold Parameter

Additional Features in SAP Fiori Elements for OData V2

Smart Multi-Input Control

Vertical Alignment of Responsive Tables

Showing or Hiding the Copy to Clipboard Button

Hiding Columns Using the UI.Hidden Annotation on an Object Page

Context Menu in Tables

Configuring the scrollThreshold Parameter to Optimize Data Loading

Additional Features in SAP Fiori Elements for OData V4

Excluding Fields from Table Personalization

Handling of Search Restrictions

Freezing Table Columns

Calculating the Column Width

Showing or Hiding the Copy to Clipboard Button

Configuring the scrollThreshold Parameter to Optimize Data Loading

In this section:

Related information

Hiding Table Columns Using the `UI.Hidden` Annotation

Optimizing Data Loading Using the `scrollThreshold` Parameter

Hiding Columns Using the `UI.Hidden` Annotation on an Object Page

Configuring the `scrollThreshold` Parameter to Optimize Data Loading

Configuring the `scrollThreshold` Parameter to Optimize Data Loading