Skip to content

feat(table): add support for group rows#13510

Open
aborjinik wants to merge 1 commit into
mainfrom
table-grouping
Open

feat(table): add support for group rows#13510
aborjinik wants to merge 1 commit into
mainfrom
table-grouping

Conversation

@aborjinik
Copy link
Copy Markdown
Contributor

@aborjinik aborjinik commented May 13, 2026

Introduces the ui5-table-group-row component, which allows visually grouping rows under a shared header within the table.

What it does

ui5-table-group-row is a new component that extends TableRow and renders a single cell spanning all visible columns. It acts as a visual separator and group label between sets of data rows.

Key design decisions

  • Extends TableRow — Reuses the existing row rendering pipeline (grid layout, focus handling, aria-rowindex) without special-casing in Table core since all the features provided by the row (selection, row actions, interactive etc.) will be needed by the TableGroupRow soon.
  • Opt-out pattern — Group rows override getters (_isSelectable,_hasPopin, _isInteractive, _isNavigable, _hasSelector) to disable features that don't apply, keeping feature code unchanged.
  • Empty cells/actionsObject.defineProperty overrides the cells an actions slots with frozen empty arrays, preventing accidental slot content from rendering.
  • isGroupRow() marker — Used by Table core and features to detect group rows without instanceof checks across shadow DOM.

Integration with existing features

  • Selection — Group rows are excluded from Select All and range selection. TableSelectionMulti filters them via isGroupRow().
  • Row alternation — The alternating color counter resets after each group row so groups have independent zebra striping.
  • Keyboard navigation — Group rows participate in the grid navigation as normal rows (focusable via arrow keys).
  • Custom announcements — Screen reader announcements include group rows in the row count but label them via aria-roledescription.
  • Popin mode — Group rows report _hasPopin = false and are skipped during popin state sync to avoid errors.
  • Drag and Drop — Group rows are draggable alongside regular rows.

Accessibility

  • role="row" with aria-roledescription set to a translatable "Group Row" string.
  • Single gridcell with aria-colspan spanning all visible columns and aria-colindex="1".
  • Participates in sequential aria-rowindex numbering.

Files changed

  • New: TableGroupRow.ts, TableGroupRowTemplate.tsx, TableGroupRow.css
  • Tests: TableGroupRow.cy.tsx
  • Docs/Samples: Grouping sample, TableGroupRow API docs

Fixes: #10148
CPOUIFTEAMB-2446

@github-actions

This comment was marked as resolved.

@ui5-webcomponents-bot
Copy link
Copy Markdown
Collaborator

ui5-webcomponents-bot commented May 13, 2026

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview May 13, 2026 08:06 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview May 13, 2026 08:51 Inactive
@aborjinik aborjinik requested a review from ilhan007 May 13, 2026 09:12
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview May 13, 2026 09:20 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview May 13, 2026 20:53 Inactive
@aborjinik aborjinik requested review from KvM2 and simlin May 15, 2026 07:53
Comment thread packages/main/src/TableGroupRow.ts Outdated
Comment thread packages/main/src/TableGroupRow.ts Outdated
Comment thread packages/main/src/TableGroupRow.ts Outdated
Comment thread packages/main/src/TableGroupRow.ts Outdated
Comment thread packages/main/src/TableGroupRow.ts Outdated
Copy link
Copy Markdown
Contributor

@KvM2 KvM2 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a few small comments including some questions.

@aborjinik aborjinik requested a review from KvM2 May 15, 2026 15:00
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview May 15, 2026 15:07 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request]: Group Row functionality for Table v2

3 participants