TableGroupRow

<ui5-table-group-row> | Since 2.22.0

The ui5-table-group-row component represents a group header row in the ui5-table. It is used to visually group rows and spans across all visible table columns.

Usage

The ui5-table-group-row is placed as a direct child of ui5-table, alongside ui5-table-row elements. Rows following a group row are considered part of that group until the next group row.

<ui5-table>
  <ui5-table-header-row>...</ui5-table-header-row>
  <ui5-table-group-row>Country: Germany</ui5-table-group-row>
  <ui5-table-row>...</ui5-table-row>
  <ui5-table-row>...</ui5-table-row>
  <ui5-table-group-row>Country: France</ui5-table-group-row>
  <ui5-table-row>...</ui5-table-row>
</ui5-table>

Unsupported Features

The following features of ui5-table-row are currently not supported by ui5-table-group-row and have no effect:

• Cells (cells slot): Group rows render a single spanning cell with a text. Any slotted ui5-table-cell elements are ignored.
• Actions (actions slot): Row actions such as ui5-table-row-action or ui5-table-row-action-navigation are not rendered.
• Navigation (navigated property): The navigated indicator is not rendered on group rows.
• Interactive (interactive property): Group rows do not support click/activation behavior.
• Selection (rowKey property`): Group rows cannot be selected. They are excluded from select all and range selection operations.
• Virtualizer (position property): Group rows are not supported by the ui5-table-virtualizer`.

ES6 Module Import

import "@ui5/webcomponents/dist/TableGroupRow.js";

Properties

interactive

Description	Defines the interactive state of the row.
Type	boolean
Default	false

movable

Description	Defines whether the row is movable.
Type	boolean
Default	false
Since	2.6.0

navigated

Description	Defines the navigated state of the row.
Type	boolean
Default	false

position

Description	Defines the 0-based position of the row related to the total number of rows within the table when the ui5-table-virtualizer feature is used.
Type	number | undefined
Default	undefined
Since	2.5.0

rowKey

Description	Unique identifier of the row. Note: For selection features to work properly, this property is mandatory, and its value must not contain spaces.
Type	string | undefined
Default	undefined

Slots

actions

Description	Defines the actions of the component. Note: Use ui5-table-row-action or ui5-table-row-action-navigation for the intended design.
Type	Array<TableRowActionBase>
Since	2.7.0

default

Description	Defines the cells of the component. Note: Use ui5-table-cell for the intended design.
Type	Array<TableCell>

Events

No events available for this component.

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.

CSS Custom States

No CSS custom states available for this component.

Basic Sample