TableSelectionMulti

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

The ui5-table-selection-multi component is used inside the ui5-table to add multi-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-multi 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-multi slot="features" selected="Row1 Row3"></ui5-table-selection-multi>
</ui5-table>

ES6 Module Import

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

Properties

selected

Description	Defines the row-key values of selected rows, with each value separated by a space.
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

getSelectedRows

Description	Returns an array of the selected rows.
Return type	Array<TableRow>

areAllRowsSelected

Description	Determines whether all rows are selected.
Return type	boolean

getSelectedAsSet

Description	Returns the selected property as a set of unique row-key values.
Return type	Set<string>

setSelectedAsSet

Description	Sets the selected property using the provided set of unique row-key values.
Return type	void
Parameters	selectedSet: Set<string> A set of row-key values

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 multi-selection in your table by adding the <ui5-table-selection-multi> feature.

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