Skip to main content

Module 12: Tables & Lists

Tables and lists are core UI elements in enterprise SAPUI5 applications.
Choosing the right table control and configuring it correctly is critical for performance and UX.

This module explains:

  • Which table to use and when
  • How data binding works in tables
  • Performance best practices for large datasets

1. Overview: Tables vs Lists in SAPUI5​

SAPUI5 provides two main table controls:

ControlLibraryUse Case
sap.m.Tablesap.mResponsive, mobile-first
sap.ui.table.Tablesap.ui.tableDesktop-heavy, data-intensive
SAP Recommendation

Use sap.m.Table by default.
Use sap.ui.table.Table only when necessary.

2. sap.m.Table (Responsive Table)​

When to Use sap.m.Table​

  • Mobile & responsive apps
  • Fiori applications
  • Small to medium datasets
  • Touch-friendly UI

Basic sap.m.Table Example​

<Table items="{/SalesOrderSet}">
  <columns>
    <Column>
      <Text text="Order ID" />
    </Column>
    <Column>
      <Text text="Customer" />
    </Column>
  </columns>

  <items>
    <ColumnListItem>
      <cells>
        <Text text="{SalesOrderID}" />
        <Text text="{Customer}" />
      </cells>
    </ColumnListItem>
  </items>
</Table>
Best Practice

Always bind items, never create rows manually.

3. sap.ui.table.Table (Grid Table)​

When to Use sap.ui.table.Table​

  • Desktop-only scenarios
  • Large datasets
  • Analytical or spreadsheet-like use cases

Basic sap.ui.table.Table Example​

<ui:Table
  rows="{/SalesOrderSet}"
  xmlns:ui="sap.ui.table">

  <ui:columns>
    <ui:Column>
      <Label text="Order ID" />
      <ui:template>
        <Text text="{SalesOrderID}" />
      </ui:template>
    </ui:Column>
  </ui:columns>

</ui:Table>
SAP Guidance

Avoid sap.ui.table.Table in mobile/Fiori apps.

4. Responsive Table Behavior (sap.m.Table)​

Built-in Responsiveness​

sap.m.Table automatically:

  • Adapts column visibility
  • Supports pop-in behavior
  • Adjusts layout per device

Pop-in Example​

<Column minScreenWidth="Tablet" demandPopin="true">
  <Text text="Amount" />
</Column>
UX Benefit

Important data stays visible on small screens.

5. Column Binding & Templates​

Column Binding Concept​

Columns define structure
Cells bind data

<ColumnListItem>
  <cells>
    <Text text="{Amount}" />
  </cells>
</ColumnListItem>

Using Formatters in Tables​

<Text text="{path: 'Amount', formatter: '.formatAmount'}" />
Clean UI5

Keep templates simple and lightweight.

6. Growing & Pagination​

Growing Feature (sap.m.Table)​

Used for lazy loading.

<Table
  growing="true"
  growingThreshold="20"
  items="{/SalesOrderSet}">
</Table>

Benefits:

  • Better performance
  • Improved UX
  • Reduced initial load

Pagination (Backend)​

Use $top / $skip

Handled by ODataModel automatically

OData Advantage

UI5 + OData handle paging without custom logic.

7. Performance Considerations (Very Important)​

Key Performance Rules​

Follow These
  • Never load large datasets at once
  • Use server-side paging
  • Avoid complex controls in cells
  • Prefer text over input controls
  • Use growing instead of pagination buttons

Common Performance Killers​

Avoid These
  • Thousands of rows in sap.m.Table
  • Nested controls in cells
  • Heavy formatters
  • Client-side filtering of large datasets

8. sap.m.Table vs sap.ui.table.Table (Comparison)​

Aspectsap.m.Tablesap.ui.table.Table
Mobile Support✅❌
Responsiveness✅❌
Performance (Large Data)⚠️✅
Fiori Compliance✅❌
Interview Insight

Say: "sap.m.Table is for Fiori, sap.ui.table.Table is for power users."

9. Common Table Patterns​

Master–Detail Pattern​

  • Master: List or Table
  • Detail: Object page
Real Projects

Most UI5 apps use table-based master views.

10. Interview-Grade Explanation​

Q: Which table control do you use in SAPUI5 and why?

Answer:

I use sap.m.Table for most Fiori and responsive applications because it is mobile-friendly and supports responsive behavior. I use sap.ui.table.Table only for desktop-heavy or analytical scenarios requiring high data density.

11. Summary​

  • Tables display collections of data
  • sap.m.Table is responsive and preferred
  • sap.ui.table.Table is desktop-focused
  • Column binding defines structure
  • Growing improves performance
  • Performance must be planned upfront

12. What's Next?​

➡️ Module 13: Forms & Validation

Learning Tip

A poorly designed table can break performance — choose wisely.