Run any Skill in Manus with one click

ui5-best-practices-tables

Stars28

Forks7

UpdatedJune 24, 2026 at 08:05

UI5 table best practices and authoritative development guidelines. Use when the user asks to "create a table", "add a table", "which table should I use", "implement sap.m.Table", "implement sap.ui.table", "GridTable", "ResponsiveTable", "TreeTable", "SmartTable", "MDC table", "sap.ui.mdc.Table", "sap.ui.comp.smarttable", "table not showing data", "table binding", "table selection", "drag and drop table", "table personalization", "copy paste table", "table export", "table sticky header", "table growing", "table pop-in", "table performance", "table accessibility", "table items binding", or is writing any UI5 freestyle application that includes a table control. Covers: control selection matrix, mandatory rules, common error patterns, and per-control API guidance for sap.m.Table, sap.ui.table.Table, sap.ui.table.TreeTable, sap.ui.comp.smarttable.SmartTable, and sap.ui.mdc.Table. Keywords: sap.m.Table, sap.ui.table, GridTable, ResponsiveTable, TreeTable, SmartTable, sap.ui.mdc.Table, table binding, rows aggregati

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

UI5

UI5/plugins-coding-agents

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

File Explorer

9 files

SKILL.md

readonly

More from this repository

same repository

ui5-best-practices-mdc

UI5/plugins-coding-agents

UI5 MDC (Model-Driven Controls) best practices and authoritative development guidelines for OData V4 delegate-based controls. Use when the user asks to "create an MDC FilterBar", "implement MDC Chart", "add MDC Field", "use MDC FilterField", "implement ValueHelp", "add MDC Link", "MDC MultiValueField", "sap.ui.mdc", "delegate pattern", "fetchProperties", "OData V4 freestyle controls", "MDC personalization", "p13nMode", "PropertyInfo", "MDC delegate", "FilterBarDelegate", "ChartDelegate", "ValueHelpDelegate", "LinkDelegate", "MDC field not rendering", "MDC chart not binding", "MDC conditions", "Condition.createCondition", "MDC Table delegate", or is writing any UI5 freestyle application using OData V4 with model-driven controls from sap.ui.mdc. Covers: delegate pattern, PropertyInfo structure, mandatory rules, common error patterns, and per-control API reference for FilterBar, Chart, Field, FilterField, ValueHelp, Link, and MultiValueField. Keywords: sap.ui.mdc, MDC, FilterBar, Chart, Field, FilterField, Valu

2026-07-0328

ui5-best-practices-smart-controls

UI5/plugins-coding-agents

UI5 smart controls best practices and authoritative development guidelines for OData V2 annotation-driven controls. Use when the user asks to "create a SmartField", "add a SmartForm", "implement SmartFilterBar", "create SmartChart", "add SmartLink navigation", "use SmartMultiInput", "smart control annotations", "OData V2 metadata-driven controls", "sap.ui.comp", "field control annotation", "value help annotations", "ValueList annotation", "smart form layout", "smart filter bar configuration", "chart annotations", "semantic object navigation", "smart link popover", "SmartField edit mode", "SmartField display mode", "SmartFilterBar liveMode", "SmartChart drill-down", "SmartMultiInput tokens", "SmartTable configuration", or is writing any UI5 freestyle application using OData V2 annotation-driven controls from sap.ui.comp. Covers: control selection, mandatory rules, common error patterns, annotation guidance, and per-control API reference for SmartField, SmartForm, SmartFilterBar, SmartChart, SmartLink, and Smar

2026-07-0328

ui5-best-practices-accessibility

UI5/plugins-coding-agents

This skill should be used when the user asks to audit, fix, check, review, or improve accessibility, a11y, ARIA, WCAG compliance, landmarks, labeling, heading levels, focus handling, keyboard navigation, keyboard shortcuts, screen reader support, invisible messaging, reading order, or touch / target size in UI5 application files (views, fragments, controllers). Also use when the user creates a new UI5 view, fragment, or controller and wants it to be accessible, or asks whether a specific control (Dialog, Table, Panel, etc.) meets accessibility requirements. Keywords: accessibility, a11y, ARIA, WCAG, screen reader, NVDA, JAWS, VoiceOver, landmark, landmarkInfo, accessibleRole, ariaLabelledBy, ariaDescribedBy, labelFor, tooltip, alt text, decorative, heading level, initialFocus, F6, fast nav, fastnavgroup, tabindex, CommandExecution, keyboard shortcut, InvisibleMessage, announce, reading order, reactiveAreaMode, target size.

2026-07-0328

fix-control-renderer

UI5/plugins-coding-agents

Fix Control renderer issues that UI5 linter reports but cannot auto-fix. Use this skill when linter outputs these rules: - `no-deprecated-control-renderer-declaration` - For missing renderer declaration, string-based renderer declaration, implicit renderer auto-discovery (removed in modern UI5) - `no-deprecated-api` - For missing apiVersion:2 in renderer objects, missing IconPool import when using oRm.icon(), deprecated rerender() override. NOTE: For Library.init() apiVersion errors, use fix-library-init instead. - `ui5-class-declaration` - For non-static renderer property in ES6 classes Trigger on: "missing a renderer declaration", "Deprecated declaration of renderer", "deprecated renderer", "apiVersion" (in renderer context), "IconPool", "rerender", "renderer must be a static property" Converts legacy renderer patterns to modern apiVersion: 2 format with proper module imports.

2026-06-2528

fix-js-globals

UI5/plugins-coding-agents

Fix JavaScript `no-globals` errors that UI5 linter reports but cannot auto-fix. Use this skill when linter outputs: - `no-globals` rule with message "Access of global variable '...' (...)" in JS files Cases handled (linter CANNOT auto-fix): - Assignments to global namespaces: `sap.myNamespace = {...}` - Global namespace assignment/read inside sap.ui.define - Delete expressions: `delete sap.something` - sap.ui.core.Core direct access (class vs singleton) - jQuery/$ globals: add `sap/ui/thirdparty/jquery` — do NOT replace jQuery API calls - jQuery.sap.* utilities: replace with dedicated modules - Conditional/probing access: `if (sap.ui.something)` - Custom namespace definitions that aren't UI5 modules - sap.ui.controller() factory → Controller.extend (NOT Fiori Elements extensions) - jQuery.sap.declare/require: legacy modules without sap.ui.define Trigger when: "fix no-globals", "global variable error", "sap.ui.getCore", "jQuery.sap" Converts global namespace access to proper sap.ui.define module imports.

2026-06-2528

fix-linter-blind-spots

UI5/plugins-coding-agents

Fix runtime-breaking patterns in JS files that the UI5 linter does NOT report. Use this skill when: - Tests fail after modernization with "ReferenceError", "TypeError: Cannot read properties of undefined", or "X is not defined" - The linter shows zero remaining errors but tests still crash at runtime - Phase 3, Step 3.2 of the modernize-ui5-app workflow (runs after the parallel globals batch, before fix-cyclic-deps) - User mentions "runtime errors after modernization", "test failures after modernization", "global namespace still used" - After running fix-js-globals and fix-cyclic-deps, but tests STILL fail - User sees "X is not a constructor" or module loading errors in test output The linter only checks sap.* globals in JS. App-specific namespace patterns (e.g., com.example.app.utils.Module) are invisible to it. This skill detects and fixes those across ALL JS files — app source AND test. NOTE: App-namespace globals in XML files are handled by `fix-xml-globals` — NOT by this skill.

2026-06-2528

name

ui5-best-practices-tables

description

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

Trigger	Load
Working on or planning a `sap.m.Table` (ResponsiveTable)	`references/sap-m-table.md`
Working on or planning a `sap.ui.table.Table` (GridTable)	`references/grid-table.md`
Working on or planning a `sap.ui.table.TreeTable`	`references/tree-table.md`
Working on or planning a `sap.ui.comp.smarttable.SmartTable`	`references/smart-table.md`
Working on or planning a `sap.ui.mdc.Table`	`references/mdc-table.md`
Adding drag-and-drop to any table	`references/drag-and-drop.md`
Adding column personalization	`references/personalization.md`
Choosing cell templates, alignment, or data type binding	`references/cell-templates.md`

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 type	Use when	Do not use when
`sap.m.Table`	Mobile/responsive, pop-in behavior, JSON models, fewer than 100 rows	1000+ rows, virtualization required, desktop-only, cell selection needed
`sap.ui.table.Table`	Desktop, 1000+ rows, virtualization, fixed columns, dense data	Mobile-first, pop-in required, text wrapping, small datasets
`sap.ui.table.TreeTable`	Hierarchical data, expand/collapse, parent-child relationships	Flat data, mobile-first, grouping (not hierarchy)
`SmartTable`	OData V2, annotations, automatic columns, smart filtering	JSON-only, precise control required, OData V4
`sap.ui.mdc.Table`	OData V4 freestyle (when Fiori elements is ruled out), delegate pattern	JSON-only, simple apps, OData V2

Dataset size guide

Rows	Recommended table	Strategy
< 100	`sap.m.Table`	Simple binding, `growing` optional
100–1000	`sap.ui.table.Table`	Virtualization, `threshold=100`
1000+	`sap.ui.table.Table`	Virtualization, `threshold=100–500`, `$count=true` when needed

Common Errors

Symptom	Cause	Fix
No data displayed	Incorrect binding path or missing model	Verify `bindRows`/`bindItems` path and model attachment.
Rows not scrolling (`sap.ui.table.*`)	Count not requested	Set `$count=true` for OData when a total count is required.
Selection not working (`sap.ui.table.*`)	Plugin conflict	Do not call the table selection API when a selection plugin is applied; use the plugin API instead.
Text wrapping issues	Wrapping enabled in `sap.ui.table.*`	Use fixed-height content or switch to `sap.m.Table`.
Copy/paste not working	Plugin not attached or wrong namespace	Attach the correct plugin (see Drag & Drop section).
Personalization not persisting	Engine not configured	Verify `sap.m.p13n.Engine` registration.
`CopyProvider` error	`extractData` not defined	Implement `extractData` on the plugin.
Table not visible	Invalid container structure	Use a valid container (see Container Structures).
OData types on JSON model	Wrong type namespace	Match 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 silently	Library not loaded or invalid `extractData`	Detect the library, return a 2D array from `extractData`, ensure `dataSource` binding.
"No Data Available"	Model not set before binding	Set the model in `Component.init()` before router initialization.

Container Structures

Valid

Structure	Use case
`View > Page > content > Table`	Standard page
`View > Page > content > Panel > Table`	Grouped content
`View > Page > content > IconTabBar > items > IconTabFilter > Table`	Tabs
`View > SplitApp > detailPages > Page > Table`	Master-detail
`View > Dialog > content > Table`	Modal
`View > Table`	Standalone

Invalid (and why)

Structure	Issue
`Page > content > VBox > Table`	`VBox` needs explicit height — table becomes invisible
`Page > VBox > Table`	`VBox` not in `content` — table not rendered
`Page > content > FlexBox > Table`	Sizing conflict — table collapses
`Page > content > ScrollContainer > Table`	Double 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.