Skip to main content

TableSelection

<ui5-table-selection> | Since 2.0.0
info

This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.

The ui5-table-selection component is used inside the ui5-table ti 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​

DescriptionDefines the selection mode.
Type"None" | "Single" | "Multiple"
Default"Multiple"

selected​

DescriptionDefines the selected rows separated by a space.
Typestring
Default""

Slots​

No slots available for this component.

Events​

change​

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

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.