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";

Basic Sample​

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>

status​

DescriptionDefines the status indicator of the row.
Note: The status is only rendered if the ui5-table-header-row contains a ui5-table-header-row-status.
TypeArray<TableRowStatus>
Since2.29.0

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.

More Samples​

Movable Rows​

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

Row Status​

Place a ui5-table-row-status in the row's status slot to display a semantic status indicator. Add a ui5-table-header-row-status to the header row's status slot to reserve and enable the status column; the header status component does not display an indicator itself. Use value to choose Positive, Critical, Negative, or Information. Each value provides a built-in screen-reader announcement; set text for a more specific description, such as "In stock". The default value is undefined, which renders no indicator.