fix(ui5-table): optimize non popin table rendering (#1229)

SAP · Feb 21, 2020 · 872dcad · 872dcad
1 parent b98e54c
commit 872dcad
Show file tree

Hide file tree

Showing 4 changed files with 171 additions and 27 deletions.
diff --git a/packages/main/src/TableRow.hbs b/packages/main/src/TableRow.hbs
@@ -4,19 +4,26 @@
 	@focusin="{{_onfocusin}}"
 	@ui5-_cellclick="{{_oncellclick}}"
 	data-sap-focus-ref>
+	{{#if shouldPopin}}
 		{{#each visibleCells}}
 			<slot name="{{this._individualSlot}}"></slot>
 		{{/each}}
-</tr>
-
+	{{else}}
+		{{#each cells}}
+			<slot name="{{this._individualSlot}}"></slot>
+		{{/each}}
+	{{/if}}
+</tr>	
 
-{{#each popinCells}}
-	<tr class="ui5-table-popin-row" @ui5-_cellclick="{{_oncellclick}}">
-		<td colspan="{{../visibleCellsCount}}">
-			<span class="ui5-table-row-popin-title">{{this.popinText}}:</span>
-			<div>
-				<slot name="{{this.cell._individualSlot}}"></slot>
-			</div>
-		</td>
-	</tr>
-{{/each}}
+{{#if shouldPopin}}
+	{{#each popinCells}}
+		<tr class="ui5-table-popin-row" @ui5-_cellclick="{{_oncellclick}}">
+			<td colspan="{{../visibleCellsCount}}">
+				<span class="ui5-table-row-popin-title">{{this.popinText}}:</span>
+				<div>
+					<slot name="{{this.cell._individualSlot}}"></slot>
+				</div>
+			</td>
+		</tr>
+	{{/each}}
+{{/if}}
diff --git a/packages/main/src/TableRow.js b/packages/main/src/TableRow.js
@@ -102,7 +102,17 @@ class TableRow extends UI5Element {
 		return document.activeElement.localName.toLocaleLowerCase();
 	}
 
+	get shouldPopin() {
+		return this._columnsInfo.filter(el => {
+			return el.demandPopin;
+		}).length;
+	}
+
 	onBeforeRendering() {
+		if (!this.shouldPopin) {
+			return;
+		}
+
 		this.visibleCells = [];
 		this.popinCells = [];
 
@@ -140,21 +150,6 @@ class TableRow extends UI5Element {
 		}
 	}
 
-	get styles() {
-		const gridTemplateColumns = this._columnsInfo.reduce((acc, info) => {
-			return info.visible ? `${acc}minmax(0, ${info.width || "1fr"}) ` : acc;
-		}, "");
-
-		return {
-			main: {
-				"grid-template-columns": gridTemplateColumns,
-			},
-			popin: {
-				"grid-column-end": 6,
-			},
-		};
-	}
-
 	get visibleCellsCount() {
 		return this.visibleCells.length;
 	}

diff --git a/packages/main/test/pages/Table-perf-pure.html b/packages/main/test/pages/Table-perf-pure.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>Web components Table</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<script data-config type="application/json">
+		{
+			"language": "EN"
+		}
+	</script>
+
+	<script>
+		delete Document.prototype.adoptedStyleSheets
+	</script>
+
+	<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
+	<script src="../../resources/bundle.esm.js" type="module"></script>
+	<script nomodule src="../../resources/bundle.es5.js"></script>
+
+</head>
+
+<!-- Initial - 2200 -->
+<!-- shouldPopin - 2000 -->
+<!-- remove ifDefined - 1850 -->
+
+<body style="background-color: var(--sapBackgroundColor);">
+	<table id="tbl">
+		<tr>
+			<th slot="columns">
+				First
+			</th>
+			<th slot="columns">
+				Second
+			</th>
+			<th slot="columns">
+				Third
+			</th>
+			<th slot="columns">
+				Fifth
+			</th>
+			<th slot="columns">
+				Sixth
+			</th>
+		</tr>
+	</table>
+
+
+	<script>
+		const tbl = document.getElementById("tbl");
+
+
+		[...Array(1000)].map(item => {
+			const row = document.createElement("tr");
+
+			[...Array(5)].map(_ => {
+				const cell = document.createElement("td");
+				const span = document.createElement("span");
+				span.innerText = "Hello World!";
+
+				cell.appendChild(span);
+				row.appendChild(cell);
+			});
+
+			tbl.appendChild(row);
+		})
+	</script>
+</body>
+
+</html>
diff --git a/packages/main/test/pages/Table-perf.html b/packages/main/test/pages/Table-perf.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>Web components Table</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<script data-ui5-config type="application/json">
+		{
+			"language": "EN"
+		}
+	</script>
+
+	<script>
+		delete Document.prototype.adoptedStyleSheets
+	</script>
+
+	<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
+	<script src="../../resources/bundle.esm.js" type="module"></script>
+	<script nomodule src="../../resources/bundle.es5.js"></script>
+
+</head>
+
+<!-- Initial - 2200 -->
+<!-- shouldPopin - 2000 -->
+<!-- remove ifDefined - 1850 -->
+
+<body style="background-color: var(--sapBackgroundColor);">
+	<ui5-table id="tbl">
+		<ui5-table-column slot="columns">
+			First
+		</ui5-table-column>
+		<ui5-table-column slot="columns">
+			Second
+		</ui5-table-column>
+		<ui5-table-column slot="columns">
+			Third
+		</ui5-table-column>
+		<ui5-table-column slot="columns">
+			Fifth
+		</ui5-table-column>
+		<ui5-table-column slot="columns">
+			Sixth
+		</ui5-table-column>
+	</ui5-table>
+
+
+	<script>
+		const tbl = document.getElementById("tbl");
+
+
+		[...Array(1000)].map(item => {
+			const row = document.createElement("ui5-table-row");
+
+			[...Array(5)].map(_ => {
+				const cell = document.createElement("ui5-table-cell");
+				const span = document.createElement("span");
+				span.innerText = "Hello World!";
+
+				cell.appendChild(span);
+				row.appendChild(cell);
+			});
+
+			tbl.appendChild(row);
+		})
+	</script>
+</body>
+
+</html>