fix(ui5-table): fix JS error when there are less cells than columns (#841)

In case we have more columns declared, but less cells provided,
a JS error is present and the ui5-table is not displayed at all.

Author: ilhan007

packages/main/src/TableRow.js

@@ -81,19 +81,25 @@ class TableRow extends UI5Element {
 		}
 
 		this._columnsInfo.forEach((info, index) => {
+			const cell = this.cells[index];
+
+			if (!cell) {
+				return;
+			}
+
 			if (info.visible) {
-				this.visibleCells.push(this.cells[index]);
-				this.cells[index].firstInRow = (index === 0);
-				this.cells[index].popined = false;
+				this.visibleCells.push(cell);
+				cell.firstInRow = (index === 0);
+				cell.popined = false;
 			} else if (info.demandPopin) {
 				this.popinCells.push({
-					cell: this.cells[index],
+					cell,
 					popinText: info.popinText,
 				});
 
-				this.cells[index].popined = true;
+				cell.popined = true;
 			} else {
-				this.cells[index].popined = false;
+				cell.popined = false;
 			}
 		}, this);
 

packages/main/test/sap/ui/webcomponents/main/pages/Table.html

@@ -162,6 +162,54 @@
 		</ui5-table-column>
 	</ui5-table>
 
+	<!-- 3 columns, but 1 cell -->
+	<ui5-title>3 columns, but 1 cell</ui5-title>
+	<ui5-table class="demo-table" id="tblLessCells">
+		<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>
+			<ui5-table-cell>Dublin</ui5-table-cell>
+		</ui5-table-row>
+		<ui5-table-row>
+			<ui5-table-cell>Sofia</ui5-table-cell>
+		</ui5-table-row>
+		<ui5-table-row>
+			<ui5-table-cell>London</ui5-table-cell>
+		</ui5-table-row>
+	</ui5-table>
+
+	<!-- 1 column, but 3 cells -->
+	<ui5-title>1 column, but 3 cells</ui5-title>
+	<ui5-table class="demo-table" id="tblLessColumns">
+		<ui5-table-column id="column-1" slot="columns">
+			<ui5-label>City</ui5-label>
+		</ui5-table-column>
+
+		<ui5-table-row>
+			<ui5-table-cell>Dublin</ui5-table-cell>
+			<ui5-table-cell>Sofia</ui5-table-cell>
+			<ui5-table-cell>London</ui5-table-cell>
+		</ui5-table-row>
+		<ui5-table-row>
+			<ui5-table-cell>Madrid</ui5-table-cell>
+			<ui5-table-cell>Rome</ui5-table-cell>
+			<ui5-table-cell>Barcelona</ui5-table-cell>
+		</ui5-table-row>
+
+	</ui5-table>
+
 
 	<script>
 		"use strict";

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

@@ -29,4 +29,9 @@ describe("Table general interaction", () => {
 
 		assert.strictEqual(noDataRow.isExisting(), true, 'noData div is present');
 	});
+
+	it("tests if table with more columns than cells is rendered", () => {
+		const tblLessCells = browser.$("#tblLessCells");
+		assert.equal(tblLessCells.isExisting(), true, 'table with more columns is rendered without JS errors.');
+	});
 });