chore(ui5-table): remove selection import & rename key (#9300)

- rename key to rowId
- remove import of selection in table -> you need to import the Selection feature separately to enable it now

packages/main/src/Table.ts

@@ -16,14 +16,15 @@ import TableRow from "./TableRow.js";
 import type TableHeaderRow from "./TableHeaderRow.js";
 import type TableHeaderCell from "./TableHeaderCell.js";
 import TableExtension from "./TableExtension.js";
-import TableSelection from "./TableSelection.js";
+import type TableSelection from "./TableSelection.js";
 import TableOverflowMode from "./types/TableOverflowMode.js";
 import TableNavigation from "./TableNavigation.js";
 import {
 	TABLE_NO_DATA,
 } from "./generated/i18n/i18n-defaults.js";
 import BusyIndicator from "./BusyIndicator.js";
 import TableCell from "./TableCell.js";
+import { isFeature } from "./TableUtils.js";
 
 /**
  * Interface for components that can be slotted inside the <code>features</code> slot of the <code>ui5-table</code>.
@@ -32,6 +33,7 @@ import TableCell from "./TableCell.js";
  * @experimental
  */
 interface ITableFeature extends UI5Element {
+	readonly identifier: string;
 	/**
 	 * Called when the table is activated.
 	 * @param table table instance
@@ -82,6 +84,7 @@ type TableRowClickEventDetail = {
  *
  * The `ui5-table` can be enhanced in its functionalities by applying different features.
  * Features can be slotted into the `features` slot, to enable them in the component.
+ * Features need to be imported separately, as they are not enabled by default.
  *
  * The following features are currently available:
  *
@@ -346,12 +349,8 @@ class Table extends UI5Element {
 		this.features.forEach(feature => feature.onTableRendered?.());
 	}
 
-	_getFeature<Klass>(klass: any): Klass | undefined {
-		return this.features.find(feature => feature instanceof klass) as Klass;
-	}
-
 	_getSelection(): TableSelection | undefined {
-		return this._getFeature(TableSelection);
+		return this.features.find(feature => isFeature<TableSelection>(feature, "TableSelection")) as TableSelection;
 	}
 
 	_onEvent(e: Event) {

packages/main/src/TableGrowing.ts

@@ -124,6 +124,7 @@ class TableGrowing extends UI5Element implements ITableGrowing {
 	@property({ type: Boolean })
 	_activeState = false;
 
+	readonly identifier = "TableGrowing";
 	_table?: Table;
 	_observer?: IntersectionObserver;
 	_individualSlot?: string;

packages/main/src/TableRow.ts

@@ -53,13 +53,13 @@ class TableRow extends TableRowBase {
 	cells!: Array<TableCell>;
 
 	/**
-	 * Unique identifier of the component.
+	 * Unique identifier of the row.
 	 *
 	 * @default ""
 	 * @public
 	 */
 	@property()
-	key = "";
+	rowKey = "";
 
 	/**
 	 * Defines the interactive state of the row.

packages/main/src/TableSelection.ts

@@ -26,7 +26,7 @@ import { isSelectionCheckbox, isHeaderSelector, findRowInPath } from "./TableUti
  * * Multiple - select multiple rows.
  * * None - no selection active.
  *
- * As the selection is key-based, `ui5-table-row` components need to define a unique `key` property.
+ * As the selection is key-based, `ui5-table-row` components need to define a unique `row-key` property.
  *
  * ### Usage
  *
@@ -78,6 +78,7 @@ class TableSelection extends UI5Element implements ITableFeature {
 	@property()
 	selected = "";
 
+	readonly identifier = "TableSelection";
 	_table?: Table;
 	_rangeSelection?: {selected: boolean, isUp: boolean | null, rows: TableRow[], isMouse: boolean, shiftPressed: boolean} | null;
 
@@ -109,7 +110,7 @@ class TableSelection extends UI5Element implements ITableFeature {
 	}
 
 	getRowIdentifier(row: TableRow): string {
-		return row.key;
+		return row.rowKey;
 	}
 
 	isSelected(row: TableRowBase): boolean {
@@ -288,7 +289,7 @@ class TableSelection extends UI5Element implements ITableFeature {
 			// a visual inconsistency.
 			row.shadowRoot?.querySelector("#selection-component")?.toggleAttribute("checked", true);
 
-			if (startIndex === -1 || endIndex === -1 || row.key === startRow.key || row.key === this._rangeSelection.rows[this._rangeSelection.rows.length - 1].key) {
+			if (startIndex === -1 || endIndex === -1 || row.rowKey === startRow.rowKey || row.rowKey === this._rangeSelection.rows[this._rangeSelection.rows.length - 1].rowKey) {
 				return;
 			}
 

packages/main/src/TableUtils.ts

@@ -17,9 +17,14 @@ const findRowInPath = (composedPath: Array<EventTarget>) => {
 	return composedPath.find((el: EventTarget) => el instanceof HTMLElement && el.hasAttribute("ui5-table-row")) as TableRow;
 };
 
+const isFeature = <T>(element: any, identifier: string): element is T => {
+	return element.identifier === identifier;
+};
+
 export {
 	isInstanceOfTable,
 	isSelectionCheckbox,
 	isHeaderSelector,
 	findRowInPath,
+	isFeature,
 };

packages/main/src/bundle.esm.ts

@@ -55,6 +55,7 @@ import Table from "./Table.js";
 import TableHeaderCell from "./TableHeaderCell.js";
 import TableHeaderRow from "./TableHeaderRow.js";
 import TableGrowing from "./TableGrowing.js";
+import TableSelection from "./TableSelection.js";
 import Icon from "./Icon.js";
 import Input from "./Input.js";
 import SuggestionItemCustom from "./SuggestionItemCustom.js";

packages/main/test/pages/Table.html

@@ -35,49 +35,49 @@
 			<ui5-table-header-cell id="weightCol" popin-text="Weight">Weight</ui5-table-header-cell>
 			<ui5-table-header-cell id="priceCol" min-width="220px">Price</ui5-table-header-cell>
 		</ui5-table-header-row>
-		<ui5-table-row key="0" navigated>
+		<ui5-table-row row-key="0" navigated>
 			<ui5-table-cell><ui5-label><b>Notebook Basic 15</b><br><a href="#">HT-1000</a></ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Very Best Screens</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>30 x 18 x 3 cm</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label style="color: #2b7c2b"><b>4.2</b> KG</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label><b>956</b> EUR</ui5-label></ui5-table-cell>
 		</ui5-table-row>
-		<ui5-table-row key="1">
+		<ui5-table-row row-key="1">
 			<ui5-table-cell><ui5-label><b>Notebook Basic 16</b><br><a href="#">HT-1001</a></ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Smartcards</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-input value="29 x 17 x 3.1 cm" accessible-name-ref="dimensionsCol"></ui5-input></ui5-table-cell>
 			<ui5-table-cell><ui5-label style="color: #2b7c2b"><b>4.5</b> KG</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label><b>1249</b> EUR</ui5-label></ui5-table-cell>
 		</ui5-table-row>
-		<ui5-table-row key="2" interactive>
+		<ui5-table-row row-key="2" interactive>
 			<ui5-table-cell><ui5-label><b>Notebook Basic 17</b><br><a href="#">HT-1002</a></ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Technocom</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>32 x 21 x 4 cm</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label style="color: #2b7c2b"><b>3.7</b> KG</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label><b>29</b> EUR</ui5-label></ui5-table-cell>
 		</ui5-table-row>
-		<ui5-table-row key="3">
+		<ui5-table-row row-key="3">
 			<ui5-table-cell><ui5-label><b>Notebook Basic 18</b><br><a href="#">HT-1003</a></ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Technocom</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>32 x 21 x 4 cm</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label style="color: #2b7c2b"><b>3.7</b> KG</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label><b>29</b> EUR</ui5-label></ui5-table-cell>
 		</ui5-table-row>
-		<ui5-table-row key="4">
+		<ui5-table-row row-key="4">
 			<ui5-table-cell><ui5-label><b>Notebook Basic 19</b><br><a href="#">HT-1004</a></ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Technocom</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>32 x 21 x 4 cm</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label style="color: #2b7c2b"><b>3.7</b> KG</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label><b>29</b> EUR</ui5-label></ui5-table-cell>
 		</ui5-table-row>
-		<ui5-table-row key="5">
+		<ui5-table-row row-key="5">
 			<ui5-table-cell><ui5-label><b>Notebook Basic 20</b><br><a href="#">HT-1005</a></ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Technocom</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>32 x 21 x 4 cm</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label style="color: #2b7c2b"><b>3.7</b> KG</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label><b>29</b> EUR</ui5-label></ui5-table-cell>
 		</ui5-table-row>
-		<ui5-table-row key="6" interactive>
+		<ui5-table-row row-key="6" interactive>
 			<ui5-table-cell><ui5-label><b>Notebook Basic 21</b><br><a href="#">HT-1006</a></ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Technocom</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>32 x 21 x 4 cm</ui5-label></ui5-table-cell>
@@ -96,7 +96,7 @@
 			table.style.width = `${e.target.value}%`;
 		});
 		table.addEventListener("row-click", (e) => {
-			console.log(`${Date.now()}: Row with the key ${e.detail.row.key} is clicked`);
+			console.log(`${Date.now()}: Row with the row-key ${e.detail.row.row-key} is clicked`);
 		});
 
 		const growing = document.getElementById("growing");
@@ -106,7 +106,7 @@
 			// add 10 more additional rows to the ui5-table element by utilizing a loop
 			for (let i = 0; i < 10; i++) {
 				const newRow = document.createElement("ui5-table-row");
-				newRow.setAttribute("key", table.rows.length + i);
+				newRow.setAttribute("row-key", table.rows.length + i);
 				newRow.innerHTML = `
 					<ui5-table-cell><ui5-label><b>Notebook Basic ${15 + table.rows.length + i}</b><br><a href="#">HT-100${table.rows.length + i}</a></ui5-label></ui5-table-cell>
 					<ui5-table-cell><ui5-label>Technocom</ui5-label></ui5-table-cell>

packages/main/test/pages/TableSelection.html

@@ -25,61 +25,61 @@
 			<ui5-table-header-cell id="colC">Column C</ui5-table-header-cell>
 			<ui5-table-header-cell id="colD">Column D</ui5-table-header-cell>
 		</ui5-table-header-row>
-		<ui5-table-row key="0">
+		<ui5-table-row row-key="0">
 			<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell B</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell C</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell D</ui5-label></ui5-table-cell>
 		</ui5-table-row>
-		<ui5-table-row key="1">
+		<ui5-table-row row-key="1">
 			<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell B</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell C</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell D</ui5-label></ui5-table-cell>
 		</ui5-table-row>
-		<ui5-table-row key="2">
+		<ui5-table-row row-key="2">
 			<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell B</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell C</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell D</ui5-label></ui5-table-cell>
 		</ui5-table-row>
-		<ui5-table-row key="3">
+		<ui5-table-row row-key="3">
 			<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell B</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell C</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell D</ui5-label></ui5-table-cell>
 		</ui5-table-row>
-		<ui5-table-row key="4">
+		<ui5-table-row row-key="4">
 			<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell B</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell C</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell D</ui5-label></ui5-table-cell>
 		</ui5-table-row>
-		<ui5-table-row key="5">
+		<ui5-table-row row-key="5">
 			<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell B</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell C</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell D</ui5-label></ui5-table-cell>
 		</ui5-table-row>
-		<ui5-table-row key="6">
+		<ui5-table-row row-key="6">
 			<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell B</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell C</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell D</ui5-label></ui5-table-cell>
 		</ui5-table-row>
-		<ui5-table-row key="7">
+		<ui5-table-row row-key="7">
 			<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell B</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell C</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell D</ui5-label></ui5-table-cell>
 		</ui5-table-row>
-		<ui5-table-row key="8">
+		<ui5-table-row row-key="8">
 			<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell B</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell C</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell D</ui5-label></ui5-table-cell>
 		</ui5-table-row>
-		<ui5-table-row key="9">
+		<ui5-table-row row-key="9">
 			<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell B</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Cell C</ui5-label></ui5-table-cell>