feat(ui5-table): introduce Single and Multi selection modes

packages/base/src/types/TableMode.js

@@ -0,0 +1,47 @@
+import DataType from "./DataType.js";
+
+/**
+ * @lends sap.ui.webcomponents.main.types.TableMode.prototype
+ * @public
+ */
+const TableModes = {
+	/**
+	 * Default mode (no selection).
+	 * @public
+	 * @type {None}
+	 */
+	None: "None",
+
+	/**
+	 * Single selection mode (only one table row can be selected).
+	 * @public
+	 * @type {SingleSelect}
+	 */
+	SingleSelect: "SingleSelect",
+
+	/**
+	 * Multi selection mode (more than one table row can be selected).
+	 * @public
+	 * @type {MultiSelect}
+	 */
+	MultiSelect: "MultiSelect",
+};
+
+/**
+ * @class
+ * Defines the type of <code>ui5-table</code>.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.types.TableMode
+ * @public
+ * @enum {string}
+ */
+class TableMode extends DataType {
+	static isValid(value) {
+		return !!TableModes[value];
+	}
+}
+
+TableMode.generateTypeAccessors(TableModes);
+
+export default TableMode;

packages/main/src/Table.hbs

@@ -6,6 +6,15 @@
 	<table border="0" cellspacing="0" cellpadding="0" @keydown="{{_onkeydown}}" role="table">
 		<thead>
 			<tr id="{{_columnHeader.id}}" role="row" class="ui5-table-header-row" tabindex="{{_columnHeader._tabIndex}}" style="height: 48px" @click="{{_onColumnHeaderClick}}">
+				{{#if isMultiSelect}}
+					<th class="ui5-table-select-all-column">
+						<ui5-checkbox class="ui5-table-select-all-checkbox"
+							@change="{{_selectAll}}"
+						>
+						</ui5-checkbox>
+					</th>
+				{{/if}}
+
 				{{#each visibleColumns}}
 					<slot name="{{this._individualSlot}}"></slot>
 				{{/each}}

packages/main/src/Table.js

@@ -9,6 +9,7 @@ import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18
 import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
 import TableGrowingMode from "./types/TableGrowingMode.js";
 import BusyIndicator from "./BusyIndicator.js";
+import TableMode from "@ui5/webcomponents-base/dist/types/TableMode.js";
 
 // Texts
 import { TABLE_LOAD_MORE_TEXT } from "./generated/i18n/i18n-defaults.js";
@@ -190,6 +191,18 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the mode of the component (None, SingleSelect, MultiSelect).
+		 * @type {TableMode}
+		 * @defaultvalue "None"
+		 * @since 1.0.0-rc.13
+		 * @public
+		 */
+		mode: {
+			type: TableMode,
+			defaultValue: TableMode.None,
+		},
+
 		_hiddenColumns: {
 			type: Object,
 			multiple: true,
@@ -261,6 +274,22 @@ const metadata = {
 		 * @since 1.0.0-rc.11
 		 */
 		"load-more": {},
+
+		/**
+		 * Fired when selection is changed by user interaction
+		 * in <code>SingleSelect</code> and <code>MultiSelect</code> modes.
+		 *
+		 * @event sap.ui.webcomponents.main.Table#selection-change
+		 * @param {Array} selectedRows An array of the selected rows.
+		 * @param {Array} previouslySelectedRows An array of the previously selected rows.
+		 * @public
+		 */
+		"selection-change": {
+			detail: {
+				selectedRows: { type: Array },
+				previouslySelectedRows: { type: Array },
+			},
+		},
 	},
 };
 
@@ -344,6 +373,8 @@ class Table extends UI5Element {
 		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 
 		this.tableEndObserved = false;
+		this.addEventListener("selection-requested", this._handleMultiSelect.bind(this));
+		this.addEventListener("row-click", this._handleSingleSelect.bind(this));
 	}
 
 	onBeforeRendering() {
@@ -359,6 +390,7 @@ class Table extends UI5Element {
 			row._busy = this.busy;
 			row.removeEventListener("ui5-_focused", this.fnOnRowFocused);
 			row.addEventListener("ui5-_focused", this.fnOnRowFocused);
+			row.mode = this.mode;
 		});
 
 		this.visibleColumns = this.columns.filter((column, index) => {
@@ -445,6 +477,74 @@ class Table extends UI5Element {
 		this.fireEvent("load-more");
 	}
 
+	_handleSingleSelect(event) {
+		const row = this.getRowParent(event.target);
+		if (this.mode === "SingleSelect" && !row.selected) {
+			const previouslySelectedRows = this.rows.filter(item => item.selected);
+			this.rows.forEach(item => {
+				if (item.selected) {
+					item.selected = false;
+				}
+			});
+			row.selected = true;
+			this.fireEvent("selection-change", {
+				selectedRows: [row],
+				previouslySelectedRows,
+			});
+		}
+	}
+
+	_handleMultiSelect(event) {
+		const row = this.getRowParent(event.target);
+		const previouslySelectedRows = this.rows.filter(item => item.selected);
+		const selectAllCheckbox = this.getDomRef().querySelector(".ui5-table-select-all-checkbox");
+
+		row.selected = !row.selected;
+
+		const selectedRows = this.rows.filter(item => item.selected);
+
+		if (selectedRows.length === this.rows.length) {
+			selectAllCheckbox.checked = true;
+		} else {
+			selectAllCheckbox.checked = false;
+		}
+
+		this.fireEvent("selection-change", {
+			selectedRows,
+			previouslySelectedRows,
+		});
+	}
+
+	_selectAll(event) {
+		const bAllSelected = event.target.checked;
+		const previouslySelectedRows = this.rows.filter(row => row.selected);
+
+		this.rows.forEach(row => {
+			row.selected = bAllSelected;
+		});
+
+		const selectedRows = bAllSelected ? this.rows : [];
+
+		this.fireEvent("selection-change", {
+			selectedRows,
+			previouslySelectedRows,
+		});
+	}
+
+	getRowParent(child) {
+		const parent = child.parentElement;
+
+		if (child.hasAttribute("ui5-table-row")) {
+			return child;
+		}
+
+		if (parent && parent.hasAttribute("ui5-table-row")) {
+			return parent;
+		}
+
+		this.getRowParent(parent);
+	}
+
 	getColumnHeader() {
 		return this.getDomRef() && this.getDomRef().querySelector(`#${this._id}-columnHeader`);
 	}
@@ -478,7 +578,9 @@ class Table extends UI5Element {
 		});
 
 		if (visibleColumnsIndexes.length) {
-			this.columns[visibleColumnsIndexes[0]].first = true;
+			if (!this.isMultiSelect) {
+				this.columns[visibleColumnsIndexes[0]].first = true;
+			}
 			this.columns[visibleColumnsIndexes[visibleColumnsIndexes.length - 1]].last = true;
 		}
 
@@ -578,6 +680,10 @@ class Table extends UI5Element {
 				&& rect.right <= (window.innerWidth || document.documentElement.clientWidth)
 		);
 	}
+
+	get isMultiSelect() {
+		return this.mode === "MultiSelect";
+	}
 }
 
 Table.define();

packages/main/src/TableCell.js

@@ -23,14 +23,6 @@ const metadata = {
 		},
 	},
 	properties: /** @lends sap.ui.webcomponents.main.TableCell.prototype */ {
-
-		/**
-		 * @private
-		 */
-		firstInRow: {
-			type: Boolean,
-		},
-
 		/**
 		 * @private
 		 */

packages/main/src/TableRow.hbs

@@ -8,6 +8,17 @@
 	part="row"
 	role="row"
 >
+
+	{{#if isMultiSelect}}
+		<td class="ui5-table-multi-select-cell">
+			<ui5-checkbox
+				@change="{{_handleMultiSelection}}"
+				?checked="{{this.selected}}"
+			>
+			</ui5-checkbox>
+		</td>
+	{{/if}}
+
 	{{#if shouldPopin}}
 		{{#each visibleCells}}
 			<slot name="{{this._individualSlot}}"></slot>

packages/main/src/TableRow.js

@@ -1,4 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import TableMode from "@ui5/webcomponents-base/dist/types/TableMode.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import TableRowTemplate from "./generated/templates/TableRowTemplate.lit.js";
 
@@ -28,6 +29,27 @@ const metadata = {
 		},
 	},
 	properties: /** @lends sap.ui.webcomponents.main.TableRow.prototype */ {
+		/**
+		 * Defines the mode of the row (None, SingleSelect, MultiSelect).
+		 * @type {TableMode}
+		 * @defaultvalue "None"
+		 * @private
+		 */
+		mode: {
+			type: TableMode,
+			defaultValue: TableMode.None,
+		},
+		/**
+		 * Defines the row's selected state.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @since 1.0.0-rc.13
+		 * @public
+		 */
+		selected: {
+			type: Boolean,
+		},
 		_columnsInfo: {
 			type: Object,
 			multiple: true,
@@ -43,6 +65,13 @@ const metadata = {
 	events: /** @lends sap.ui.webcomponents.main.TableRow.prototype */ {
 		"row-click": {},
 		_focused: {},
+		/**
+		 * Fired on selection change of a row in MultiSelect mode.
+		 *
+		 * @event sap.ui.webcomponents.main.TableRow#selection-requested
+		 * @private
+		 */
+		"selection-requested": {},
 	},
 };
 
@@ -97,6 +126,10 @@ class TableRow extends UI5Element {
 		this.fireEvent("row-click", { row: this });
 	}
 
+	_handleMultiSelection() {
+		this.fireEvent("selection-requested", { row: this });
+	}
+
 	_getActiveElementTagName() {
 		return document.activeElement.localName.toLocaleLowerCase();
 	}
@@ -133,7 +166,6 @@ class TableRow extends UI5Element {
 
 			if (info.visible) {
 				this.visibleCells.push(cell);
-				cell.firstInRow = (index === 0);
 				cell.popined = false;
 			} else if (info.demandPopin) {
 				const popinHeaderClass = this.popinCells.length === 0 ? "popin-header" : "";
@@ -157,7 +189,11 @@ class TableRow extends UI5Element {
 	}
 
 	get visibleCellsCount() {
-		return this.visibleCells.length;
+		if (this.isMultiSelect) {
+			return this.visibleCells.length + 1;
+		} else {
+			return this.visibleCells.length;
+		}
 	}
 
 	get ariaLabelText() {
@@ -168,6 +204,10 @@ class TableRow extends UI5Element {
 		}).join(" ");
 	}
 
+	get isMultiSelect() {
+		return this.mode === "MultiSelect";
+	}
+
 	getCellText(cell) {
 		return this.getNormilzedTextContent(cell.textContent);
 	}

packages/main/src/themes/Table.css

@@ -75,4 +75,13 @@ tr {
 
 :host([busy]) .ui5-table-load-more-row {
 	opacity: 0.72;
+}
+
+.ui5-table-select-all-column {
+	width: var(--ui5_table_multiselect_column_width);
+	text-align: center;
+}
+
+th {
+	background: var(--sapList_HeaderBackground);
 }

packages/main/src/themes/TableCell.css

@@ -9,21 +9,21 @@
 }
 
 td {
-	padding: .5rem .25rem;
+	padding: inherit;
 	box-sizing: border-box;
 	word-break: break-word;
+	vertical-align: middle;
 }
 
-:host([first-in-row]) td,
 .ui5-table-popin-row td {
 	padding-left: 1rem;
 
 }
 
-:host([first-in-row]) td {
-	padding-left: 1rem;
-}
-
 :host([popined]) td {
 	padding-left: 0;
 }
+
+::slotted(*) {
+	color: inherit;
+}