Ui5 Best Practices Tables

作者 UI5a99b882ce364無授權條款收錄於 2026年10月8日更新於 2026年10月8日

UI5 table best practices for freestyle applications. Use when creating/troubleshooting any table: sap.m.Table (ResponsiveTable), sap.ui.table.Table (GridTable), TreeTable, SmartTable, or sap.ui.mdc.Table. Covers control selection matrix, mandatory rules, common errors, and per-control API guidance. Triggers: "create a table", "which table should I use", "GridTable", "ResponsiveTable", "TreeTable", "SmartTable", "MDC table", "sap.ui.mdc.Table", "table not showing data", "table binding", "table selection", "drag and drop table", "table personalization", "table growing", "table pop-in", "table performance", "table export", "table sticky header". Keywords: sap.m.Table, sap.ui.table, GridTable, ResponsiveTable, TreeTable, SmartTable, sap.ui.mdc.Table, rows, items, rowMode, growing, sticky, personalization, p13n.Engine, DragDropInfo, OData V4, OData V2, ariaLabelledBy, cell templates

僅含說明Software DevelopmentLearning & Education
AI 產生的概覽

為自由式應用程式中的 SAPUI5 表格提供選擇、建置與疑難排解指引。

功能
提供自由式應用程式的 UI5 表格最佳實務，涵蓋 sap.m.Table、sap.ui.table.Table、TreeTable、SmartTable 與 sap.ui.mdc.Table。內容包括控制項選擇矩陣、強制規則與禁止事項、常見錯誤表、有效與無效的容器結構，以及效能與無障礙檢查清單。也會引導代理查閱各控制項的參考文件以取得 API 細節。
適用情境
適用於建立、審查或疑難排解任何 UI5 表格的情境，例如選擇表格類型、修正資料未顯示或捲動問題，或加入拖放、個人化與儲存格範本。對象為 SAPUI5 1.136+ LTS 的自由式應用程式。
執行需求
不需要指令碼，僅包含說明與參考 Markdown 檔案。代理應在產生輸出前載入相關參考檔案。

UI5 Table Best Practices

Apply these guidelines whenever generating, reviewing, or troubleshooting UI5 table code in freestyle applications.

UI5 version baseline: SAPUI5 1.136+ LTS. All features mentioned are available from this version unless noted.

When to load each reference

TriggerLoad
Working on or planning a sap.m.Table (ResponsiveTable)references/sap-m-table.md [blocked]
Working on or planning a sap.ui.table.Table (GridTable)references/grid-table.md [blocked]
Working on or planning a sap.ui.table.TreeTablereferences/tree-table.md [blocked]
Working on or planning a sap.ui.comp.smarttable.SmartTablereferences/smart-table.md [blocked]
Working on or planning a sap.ui.mdc.Tablereferences/mdc-table.md [blocked]
Adding drag-and-drop to any tablereferences/drag-and-drop.md [blocked]
Adding column personalizationreferences/personalization.md [blocked]
Choosing cell templates, alignment, or data type bindingreferences/cell-templates.md [blocked]

Load before producing any output. Do not work from memory.

Core Rules

Mandatory

  • Choose the table type using the Selection Matrix before writing any code.
  • Use the rows aggregation for sap.ui.table.* and items for sap.m.Table. Never swap them.
  • Use sap.m.p13n.Engine for personalization. Never build custom personalization dialogs.
  • Set ariaLabelledBy on every table, referencing the table title control.
  • Align cell content by data type: numbers and dates right (hAlign="End"), text and links left.
  • Use appropriate cell templates: sap.m.Text for display, sap.m.ObjectNumber for numbers, sap.m.Link for navigation.
  • Request $count=true from the back end for sap.ui.table.* when a total count is required.
  • Use the rowMode aggregation (not the deprecated visibleRowCountMode property) for sap.ui.table.* (UI5 1.119+).

Prohibitions

  • Do not use global variables. Use sap.ui.define AMD modules or ES6 imports.
  • Do not enable text wrapping in sap.ui.table.* cells — it breaks virtualization.
  • Do not assume sap.ui.export.Spreadsheet is available. Detect the library before use.
  • Do not use sap.ui.table.Table for mobile-first scenarios. Use sap.m.Table.
  • Do not use sap.m.Table for datasets with 1000+ rows that require virtualization.
  • Do not place multiple interactive elements in one sap.ui.table.Table cell.
  • Do not return enum objects from formatters. Return string literals or primitive values.
  • Do not use formatters for ColumnListItem highlight. Use direct data binding.
  • Do not access models without checking availability — causes "Cannot read properties of undefined".
  • Do not mix type namespaces: never use sap.ui.model.odata.type.* with a JSON model, or sap.ui.model.type.* with OData.

OData V4 policy

Prefer SAP Fiori elements building blocks over freestyle tables for OData V4. Use sap.ui.mdc.Table only when Fiori elements is out of scope.

Selection Matrix

Table typeUse whenDo not use when
sap.m.TableMobile/responsive, pop-in behavior, JSON models, fewer than 100 rows1000+ rows, virtualization required, desktop-only, cell selection needed
sap.ui.table.TableDesktop, 1000+ rows, virtualization, fixed columns, dense dataMobile-first, pop-in required, text wrapping, small datasets
sap.ui.table.TreeTableHierarchical data, expand/collapse, parent-child relationshipsFlat data, mobile-first, grouping (not hierarchy)
SmartTableOData V2, annotations, automatic columns, smart filteringJSON-only, precise control required, OData V4
sap.ui.mdc.TableOData V4 freestyle (when Fiori elements is ruled out), delegate patternJSON-only, simple apps, OData V2

Dataset size guide

RowsRecommended tableStrategy
< 100sap.m.TableSimple binding, growing optional
100–1000sap.ui.table.TableVirtualization, threshold=100
1000+sap.ui.table.TableVirtualization, threshold=100–500, $count=true when needed

Common Errors

SymptomCauseFix
No data displayedIncorrect binding path or missing modelVerify bindRows/bindItems path and model attachment.
Rows not scrolling (sap.ui.table.*)Count not requestedSet $count=true for OData when a total count is required.
Selection not working (sap.ui.table.*)Plugin conflictDo not call the table selection API when a selection plugin is applied; use the plugin API instead.
Text wrapping issuesWrapping enabled in sap.ui.table.*Use fixed-height content or switch to sap.m.Table.
Copy/paste not workingPlugin not attached or wrong namespaceAttach the correct plugin (see Drag & Drop section).
Personalization not persistingEngine not configuredVerify sap.m.p13n.Engine registration.
CopyProvider errorextractData not definedImplement extractData on the plugin.
Table not visibleInvalid container structureUse a valid container (see Container Structures).
OData types on JSON modelWrong type namespaceMatch the type namespace to the model: sap.ui.model.type.* for JSON, sap.ui.model.odata.type.* for OData V2, sap.ui.model.odata.v4.type.* for OData V4.
Excel export fails silentlyLibrary not loaded or invalid extractDataDetect the library, return a 2D array from extractData, ensure dataSource binding.
"No Data Available"Model not set before bindingSet the model in Component.init() before router initialization.

Container Structures

Valid

StructureUse case
View > Page > content > TableStandard page
View > Page > content > Panel > TableGrouped content
View > Page > content > IconTabBar > items > IconTabFilter > TableTabs
View > SplitApp > detailPages > Page > TableMaster-detail
View > Dialog > content > TableModal
View > TableStandalone

Invalid (and why)

StructureIssue
Page > content > VBox > TableVBox needs explicit height — table becomes invisible
Page > VBox > TableVBox not in content — table not rendered
Page > content > FlexBox > TableSizing conflict — table collapses
Page > content > ScrollContainer > TableDouble scrolling — virtualization breaks

Performance & Accessibility

Anti-patterns to avoid

  • Handcrafted personalization dialogs (use sap.m.p13n.Engine).
  • Text wrapping in sap.ui.table.Table cells.
  • Multiple interactive elements in one GridTable cell.
  • Mixing OData V2 SmartTable with V4 services.
  • Deep nesting in cell templates.
  • Fixed threshold without load testing.
  • Unconditional $count=true (request count only when needed).

Accessibility checklist

  • Set ariaLabelledBy on every table, referencing the visible title.
  • Use sap.m.Text (not raw text nodes) as cell templates.
  • For sap.ui.table.Table: test keyboard navigation (Tab, arrow keys, Space/Enter for selection).
  • Verify that the personalization dialog is keyboard-operable.
  • Test with a screen reader (NVDA/JAWS on Windows, VoiceOver on macOS) before shipping.

來源與署名

來源：UI5/plugins-coding-agents位於plugins/ui5/skills/ui5-best-practices-tables提交a99b882

授權條款： 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

更多來自 UI5/plugins-coding-agents 的技能

Modernize Ui5 App

UI5

編排五階段 UI5 應用程式現代化工作流程，包含驗證關卡與逐階段提交。

Software Development2026年10月8日

Modernize Flp Sandbox

UI5

將 SAP UI5 應用從舊版 FLP 沙箱遷移到新沙箱，重寫設定、鉤子與測試。

Software Development2026年10月8日

Fix Xml Native Html

UI5

指導將 UI5 XML 檢視中已棄用的原生 HTML 與 SVG 替換為等效的 UI5 控制項與圖示。

Software Development2026年10月8日

Fix Table Row Mode

UI5

將已棄用的 sap.ui.table.Table 列屬性轉換為 rowMode 聚合，修復 UI5 程式碼。

Software Development2026年10月8日

Fix Pseudo Modules

UI5

指導修正 UI5 檢查器回報的偽模組與隱式全域錯誤，透過調整模組匯入方式解決。

Software Development2026年10月8日

Fix Partially Deprecated Apis

UI5

修復 UI5 linter 能偵測但無法自動修復的部分棄用 SAP UI5 API 用法。

Software Development2026年10月8日

更多Software Development技能

Playground

anthropics

精選

建立自成一體的互動式 HTML 遊樂場，包含控制項、即時預覽與可複製的提示詞輸出。

Software Development37K今天更新

M5 Onboard

anthropics

精選

透過 USB 偵測 M5Stack ESP32 開發板，燒錄 UIFlow 2.0 韌體並安裝 MicroPython 應用程式套件。

Software Development37K今天更新

Cardputer Buddy

anthropics

精選

指導迭代 Cardputer-Adv 的 MicroPython 應用程式套件：新增應用程式、透過 USB 序列埠推送檔案、查看日誌並執行 REPL 指令。

Software Development37K今天更新

Dpop Adoption

google

精選

指導為 Google OAuth 平台實作 OAuth 2.0 DPoP（RFC 9449）傳送方約束的更新權杖。

Software Development21K今天更新

Gemini Live Api

google

精選

產生 Gemini Live API WebSocket 用戶端類別、測試、文件，以及用於雙向串流的示範介面。

Software Development21K今天更新

Gemini Api

google

精選

說明如何在 Google Agent Platform 上使用 Gen AI SDK 呼叫 Gemini API，涵蓋多種語言與多項功能。

Software Development21K今天更新