feat(ui5-table): provide rowClick event (#1186)

Fixes: #1018

Author: ilhan007

packages/main/src/Table.js

@@ -106,6 +106,19 @@ const metadata = {
 		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.Table.prototype */ {
+		/**
+		 * Fired when a row is clicked.
+		 *
+		 * @event
+		 * @param {HTMLElement} row the clicked row.
+		 * @public
+		 */
+		rowClick: {
+			detail: {
+				row: { type: HTMLElement },
+			},
+		},
+
 		/**
 		 * Fired when the <code>ui5-table-column</code> is shown as a pop-in instead of hiding it.
 		 *
@@ -185,6 +198,7 @@ class Table extends UI5Element {
 		}.bind(this);
 
 		this.fnOnRowFocused = this.onRowFocused.bind(this);
+		this.fnOnRowClick = this.onRowClick.bind(this);
 
 		this._handleResize = this.popinContent.bind(this);
 	}
@@ -196,6 +210,9 @@ class Table extends UI5Element {
 			row._columnsInfo = columnSettings;
 			row.removeEventListener("ui5-_focused", this.fnOnRowFocused);
 			row.addEventListener("ui5-_focused", this.fnOnRowFocused);
+
+			row.removeEventListener("ui5-_click", this.fnOnRowClick);
+			row.addEventListener("ui5-_click", this.fnOnRowClick);
 		});
 
 		this.visibleColumns = this.columns.filter((column, index) => {
@@ -219,6 +236,10 @@ class Table extends UI5Element {
 		this._itemNavigation.update(event.target);
 	}
 
+	onRowClick(event) {
+		this.fireEvent("rowClick", { row: event.target });
+	}
+
 	_onColumnHeaderClick(event) {
 		this.getColumnHeader().focus();
 		this._itemNavigation.update(event.target);

packages/main/src/TableRow.js

@@ -37,6 +37,8 @@ const metadata = {
 	},
 	events: /** @lends sap.ui.webcomponents.main.TableRow.prototype */ {
 		_focused: {},
+
+		_click: {},
 	},
 };
 
@@ -92,6 +94,8 @@ class TableRow extends UI5Element {
 			// the focus remains on that element.
 			this._onfocusin(event, true /* force row focus */);
 		}
+
+		this.fireEvent("_click");
 	}
 
 	_getActiveElementTagName() {

packages/main/test/pages/Table.html

@@ -208,7 +208,41 @@
 
 	</ui5-table>
 
+	<!-- Test row click -->
+	<ui5-title>Test row click</ui5-title>
+	<ui5-table class="demo-table" id="testRowClick">
+		<ui5-table-column id="column-1" slot="columns">
+			<ui5-label>City</ui5-label>
+		</ui5-table-column>
+
+		<ui5-table-column id="column-2" slot="columns" min-width="500" popin-text="Supplier">
+			<ui5-label>Supplier</ui5-label>
+		</ui5-table-column>
+
+		<ui5-table-column id="column-3" slot="columns" min-width="500" popin-text="Country" demand-popin>
+			<div class="column-content">
+				<ui5-label>Country</ui5-label>
+			</div>
+		</ui5-table-column>
+
+		<ui5-table-row data-city="Dublin">
+			<ui5-table-cell><span id="testRowClickCell1">Dublin</span></ui5-table-cell>
+			<ui5-table-cell><span>J.M. Brothers</span></ui5-table-cell>
+			<ui5-table-cell><span>USA</span></ui5-table-cell>
+		</ui5-table-row>
+		<ui5-table-row data-city="Sofia">
+			<ui5-table-cell><ui5-label for="myInput">Sofia</ui5-label></ui5-table-cell>
+			<ui5-table-cell><span>J.M. Brothers</span></ui5-table-cell>
+			<ui5-table-cell><span>USA</span></ui5-table-cell>
+		</ui5-table-row>
+		<ui5-table-row data-city="London">
+			<ui5-table-cell><div id="testRowClickCell2">London</div></ui5-table-cell>
+			<ui5-table-cell><span>J.M. Brothers</span></ui5-table-cell>
+			<ui5-table-cell><span>USA</span></ui5-table-cell>
+		</ui5-table-row>
+	</ui5-table>
 
+	<label id="testRowClickResult" />
 	<script>
 		"use strict";
 
@@ -2851,6 +2885,10 @@
 		table.addEventListener("popinChange", function (e) {
 			tableLable.textContent = `Number of poppedColumns: ${e.detail.poppedColumns.length}`;
 		});
+
+		testRowClick.addEventListener("rowClick", function (e) {
+			testRowClickResult.textContent = e.detail.row.getAttribute("data-city");
+		});
 	</script>
 </body>
 

packages/main/test/specs/Table.spec.js

@@ -44,4 +44,18 @@ describe("Table general interaction", () => {
 
 		assert.strictEqual(tableLabel.getHTML(false), "Number of poppedColumns: 2", "popinChange should be fired and columns should be 4");
 	});
+
+	it("tests rowClick is fired", () => {
+		const lbl = browser.$("#testRowClickResult");
+		const cellInRow1 = browser.$("#testRowClickCell1");
+		const cellInRow2 = browser.$("#testRowClickCell2");
+		const row1Data = "Dublin";
+		const row2Data = "London";
+
+		cellInRow1.click();
+		assert.ok(lbl.getHTML().indexOf(row1Data), "Event rowClick fired and intercepted.");
+
+		cellInRow2.click();
+		assert.ok(lbl.getHTML().indexOf(row2Data), "Event rowClick fired and intercepted.");
+	});
 });