SAP UI5 provides robust UI controls to display and manage collections of data efficiently. Among these, Tables and Lists are two essential components that allow developers to present tabular and list-based data in enterprise-grade web applications. Understanding how to work with these controls is vital for creating interactive, user-friendly, and responsive SAP UI5 apps.
This article explores the key concepts, types, and best practices when working with UI5 Tables and Lists.
Tables in UI5 represent data in rows and columns, making it easy to visualize structured datasets such as records from backend systems. They support rich features like sorting, filtering, grouping, and selection, enabling advanced data interaction.
SAP UI5 offers multiple table controls:
Lists are simpler UI elements that display a vertical collection of items. They are ideal for lightweight data presentation and support features like swipe gestures, grouping, and selection.
Key list controls include:
| Feature | Tables | Lists |
|---|---|---|
| Data Structure | Tabular (rows and columns) | Linear list (vertical items) |
| Use Case | Detailed data with multiple fields | Simpler or hierarchical data |
| Responsiveness | sap.m.Table is responsive; sap.ui.table is desktop-focused | Highly responsive and mobile-optimized |
| Interaction | Sorting, filtering, grouping, selection | Grouping, selection, swipe actions |
| Performance | Handles larger datasets efficiently | Optimized for simpler, less dense data |
sap.m.Table is the go-to control for responsive table needs, especially in SAP Fiori applications targeting multiple device types.
<m:Table
id="productTable"
items="{
path: '/products'
}"
inset="false">
<m:columns>
<m:Column>
<m:Text text="Product Name" />
</m:Column>
<m:Column>
<m:Text text="Price" />
</m:Column>
</m:columns>
<m:items>
<m:ColumnListItem>
<m:cells>
<m:Text text="{productName}" />
<m:Text text="{price}" />
</m:cells>
</m:ColumnListItem>
</m:items>
</m:Table>
For desktop-centric applications with complex data requirements, sap.ui.table.Table offers advanced features.
var oTable = new sap.ui.table.Table({
title: "Product List",
visibleRowCount: 10,
selectionMode: sap.ui.table.SelectionMode.MultiToggle,
columns: [
new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Product Name"}),
template: new sap.ui.commons.TextView().bindProperty("text", "productName"),
sortProperty: "productName",
filterProperty: "productName",
width: "200px"
}),
new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Price"}),
template: new sap.ui.commons.TextView().bindProperty("text", "price"),
sortProperty: "price",
filterProperty: "price",
width: "100px"
})
]
});
oTable.setModel(oModel);
oTable.bindRows("/products");
The list control is perfect for simpler or mobile-friendly displays.
<m:List items="{/contacts}">
<m:StandardListItem
title="{name}"
description="{email}"
icon="{avatarUrl}" />
</m:List>
Working effectively with UI5 tables and lists enables developers to deliver intuitive and powerful user interfaces for enterprise applications. By understanding the differences and capabilities of each control, developers can select the right tool for the job, providing end-users with smooth and engaging data experiences across devices.
Mastering these controls is essential for any SAP UI5 developer aiming to build scalable, responsive, and business-ready web applications.