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

selected

Description	Defines the row-key value of the selected row.
Type	string | undefined
Default	undefined

behavior

Description	Defines the selection behavior.
Type	"RowSelector" | "RowOnly" (value descriptions in: TableSelectionBehavior)
Default	"RowSelector"
Since	2.11

Slots

No slots available for this component.

Events

change

Description	Fired when the selection is changed by user interaction.
Type	CustomEvent
Bubbles	Yes
Cancelable	No

Methods

getSelectedRow

Description	Returns the selected row.
Return type	TableRow | undefined

getRowByKey

Description	Returns the table row instance for the given row key.
Return type	TableRow | undefined
Parameters	rowKey: string The row key

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.