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

Slots

No slots available for this component.

Events

change

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

Methods

getSelectedRow

Description	Returns the selected row.
Return type	TableRow | undefined

getRowKey

Description	Returns the unique key associated with the table row.
Return type	string
Parameters	row: TableRow The row instance

getRowByKey

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

isSelected

Description	Determines whether the specified table row is currently selected.
Return type	boolean
Parameters	row: TableRowBase The row instance

setSelected

Description	Sets the selected state of the specified table row.
Return type	void
Parameters	row: TableRowBase The row instance selected: boolean Whether the row is selected

CSS Parts

No CSS parts 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.