Tables: Which One Should I Choose?

Tables: Which One Should I Choose?

The libraries provided by SAPUI5 contain various different table controls that are suitable for different use cases. The table below outlines which table controls are available, and what features are supported by each one.

Overview of Tables and Supported Features

Responsive Table (sap.m.Table)

Grid Table (sap.ui.table.Table)

Analytical Table (sap.ui.table.AnalyticalTable)

Tree Table (sap.ui.table.TreeTable)

Desktop

Yes

Yes

Yes

Yes

Tablet

Yes

Yes

Yes

Yes

Phone

Yes

No

No

No

Responsive (hide column, popin support)

Yes

No

No

No

Compact density

Yes

Yes

Yes

Yes

Condensed density

No

Yes

Yes

Yes

Cozy density

Yes

Yes

Yes

Yes

Summarized cell

No

No

Yes

No

Hierarchical data

No

No

No

Yes

Large number of rows (> 200)2

Partly

Yes

Yes

Yes

Grouping

Yes

No

Yes

No

Freeze columns

No

Yes

Yes

Yes

Horizontal scrolling

No

Yes

Yes

Yes

Merge duplicates

Yes

No

No

No

Supported controls

Supports all kinds of controls inside a line item

Supports a limited set of controls1

Supports a limited set of controls1

Supports a limited set of controls1

Row-based

Yes

No

No

No

Column-based

No

Yes

Yes

Yes

OData-based

Requires manual modifications

Requires manual modifications

Requires manual modifications

Requires manual modifications

Cell selection

Yes

Yes

Yes

Yes

Legend:

  • Yes: Feature is supported for this table type

  • No: Feature is not supported for this table type

1) Text, Label, ObjectStatus, Icon, Button, Input, DatePicker, Select, ComboBox, MultiComboBox, CheckBox, Link, Currency, RatingIndicator, ProgressIndicator as well as the StackedBarMicroChart, ComparisonMicroChart , and BulletMicroChart controls (of responsive or extra small size); To keep the control height always stable, the wrapping and renderWhitespace properties in the sap.m.Text control, for example, must be set to false. For more information, search for cell level in the SAP Fiori Design Guidelines.

2) To optimize perfomance, we recommend to show no more than 200 items at once in the responsive table. For a larger number of items (up to 1000), use the growing feature to limit the number of displayed items and make sure the user can filter the data. For more information, see the API Reference for the growing* properties.

Caution

The limits mentioned are only recommendations. For a specific app context, the actual number of manageable items might be higher or lower.

The actual limits depend on what your scenario looks like, for example:

  • The number of rows in the table

  • The number of columns that are visible

  • The complexity of the cell content and/or the page (for example, multiple pages in a flexible column layout, or depending on how much binding is done)

  • The browser being used

For more information, search for loading items and performance in the responsive table section in the SAP Fiori Design Guidelines.

Smart Table

(sap.ui.comp.smarttable.SmartTable)

The SmartTable control is an OData-based control in V2 that automatically generates the required table (based on the tableType property) if the required annotations are maintained, and the suitable configuration is provided. All attributes mentioned in the table above depend on which table type is used for SmartTable. Refer to the respective table column for more information about the individual attributes.

Table (sap.ui.mdc)

(sap.ui.mdc.Table)

The Table control is a metadata-driven control. All attributes mentioned in the table above depend on which type aggregation is used for Table. The use of certain types of tables, for example, tree table and analytical table, depends on the delegate implementation and on which SAPUI5 model is used.