Skip to main content

TableSelectionSingle

<ui5-table-selection-single> | Since 2.8.0

The ui5-table-selection-single component is used inside the ui5-table to add single selection capabilities to the ui5-table. Since selection is key-based, each ui5-table-row must define a unique row-key property.

Usage​

The ui5-table-selection-single component is a feature designed exclusively for use within the ui5-table component. It must be placed inside the features slot of ui5-table. This component is not intended for standalone use.

<ui5-table>
	<ui5-table-selection-single slot="features" selected="Row1"></ui5-table-selection-single>
</ui5-table>

ES6 Module Import​

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

Properties​

behavior​

DescriptionDefines the selection behavior.
Type"RowOnly" | "RowSelector" (value descriptions in: TableSelectionBehavior)
Default"RowSelector"
Since2.11

selected​

DescriptionDefines the row-key value of the selected row.
Typestring | undefined
Defaultundefined

Slots​

No slots available for this component.

Events​

change​

DescriptionFired when the selection is changed by user interaction.
TypeCustomEvent
BubblesYes
CancelableNo

Methods​

getRowByKey​

DescriptionReturns the table row instance for the given row key.
Return typeTableRow | undefined
ParametersrowKey: string
The row key

getSelectedRow​

DescriptionReturns the selected row.
Return typeTableRow | undefined

CSS Parts​

No CSS parts available for this component.

CSS Custom States​

No CSS custom states available for this component.

Basic Sample​

Enable single-selection in your table by adding the <ui5-table-selection-single> feature.

The selection features of the table is key-based, therefore each row requires a row-key attribute to be uniquely identified.