TableSelection

<ui5-table-selection> | Since 2.0.0

warning

This component is deprecated and will be removed in future releases. Use the ui5-table-selection-single or ui5-table-selection-multi components instead.

The ui5-table-selection component is used inside the ui5-table to add key-based selection capabilities to the ui5-table.

The component offers three selection modes:

• Single - select a single row.
• Multiple - select multiple rows.
• None - no selection active.

As the selection is key-based, ui5-table-row components need to define a unique row-key property.

Usage

The ui5-table-selection component is only used inside the ui5-table component as a feature. It has to be slotted inside the ui5-table in the features slot. The component is not intended to be used as a standalone component.

<ui5-table>
	<ui5-table-selection mode="Multiple" slot="features"></ui5-table-selection>
</ui5-table>

ES6 Module Import

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

Properties

mode

Description	Defines the selection mode.
Type	"None" | "Single" | "Multiple"
Default	"Multiple"

selected

Description	Defines the selected rows separated by a space.
Type	string
Default	""

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

No methods available for this component.

CSS Parts

No CSS parts available for this component.

Basic Sample

Add selection capabilities to your Table by adding the Selection feature.

The current TableSelection is key-based, therefore each row requires a key-attribute to be uniquely identified.