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今天更新