Skip to main content

TableRow

<ui5-table-row> | Since 2.0.0

The ui5-table-row component represents a row in the ui5-table.

ES6 Module Import​

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

Properties​

interactive​

DescriptionDefines the interactive state of the row.
Typeboolean
Defaultfalse

movable​

DescriptionDefines whether the row is movable.
Typeboolean
Defaultfalse
Since2.6.0
DescriptionDefines the navigated state of the row.
Typeboolean
Defaultfalse

position​

DescriptionDefines 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.
Typenumber | undefined
Defaultundefined
Since2.5.0

rowKey​

DescriptionUnique identifier of the row.
Note: For selection features to work properly, this property is mandatory, and its value must not contain spaces.
Typestring | undefined
Defaultundefined

Slots​

actions​

DescriptionDefines the actions of the component.
Note: Use ui5-table-row-action or ui5-table-row-action-navigation for the intended design.
TypeArray<TableRowActionBase>
Since2.7.0

default​

DescriptionDefines the cells of the component.
Note: Use ui5-table-cell for the intended design.
TypeArray<TableCell>

Events​

click​

DescriptionFired when the row is activated by the user via click or Enter key.
Note: This event is not fired when the row has behavior="RowOnly" selection. In that case, use the selection component's change event instead.
TypeCustomEvent
Since2.9.0
BubblesYes
CancelableNo

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.

Interactive Rows​

Create an interactive table by marking ui5-table-row components as interactive. Pressing on an interactive row will fire the row-click event.

Row Click Event​

The click event is fired directly on ui5-table-row when an interactive row is activated via mouse click or keyboard Enter. This allows attaching click handlers directly on row elements, which is particularly useful for framework wrappers like React.

Movable Rows​

Adding the movable property enables the ui5-table-row for drag and drop operations.