Skip to content

Commit 872dcad

Browse files
MapTo0MapTo0
authored
fix(ui5-table): optimize non popin table rendering (#1229)
1 parent b98e54c commit 872dcad

File tree

4 files changed

+171
-27
lines changed

4 files changed

+171
-27
lines changed

‎packages/main/src/TableRow.hbs

+19-12
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,26 @@
44
@focusin="{{_onfocusin}}"
55
@ui5-_cellclick="{{_oncellclick}}"
66
data-sap-focus-ref>
7+
{{#if shouldPopin}}
78
{{#each visibleCells}}
89
<slot name="{{this._individualSlot}}"></slot>
910
{{/each}}
10-
</tr>
11-
11+
{{else}}
12+
{{#each cells}}
13+
<slot name="{{this._individualSlot}}"></slot>
14+
{{/each}}
15+
{{/if}}
16+
</tr>
1217

13-
{{#each popinCells}}
14-
<tr class="ui5-table-popin-row" @ui5-_cellclick="{{_oncellclick}}">
15-
<td colspan="{{../visibleCellsCount}}">
16-
<span class="ui5-table-row-popin-title">{{this.popinText}}:</span>
17-
<div>
18-
<slot name="{{this.cell._individualSlot}}"></slot>
19-
</div>
20-
</td>
21-
</tr>
22-
{{/each}}
18+
{{#if shouldPopin}}
19+
{{#each popinCells}}
20+
<tr class="ui5-table-popin-row" @ui5-_cellclick="{{_oncellclick}}">
21+
<td colspan="{{../visibleCellsCount}}">
22+
<span class="ui5-table-row-popin-title">{{this.popinText}}:</span>
23+
<div>
24+
<slot name="{{this.cell._individualSlot}}"></slot>
25+
</div>
26+
</td>
27+
</tr>
28+
{{/each}}
29+
{{/if}}

‎packages/main/src/TableRow.js

+10-15
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,17 @@ class TableRow extends UI5Element {
102102
return document.activeElement.localName.toLocaleLowerCase();
103103
}
104104

105+
get shouldPopin() {
106+
return this._columnsInfo.filter(el => {
107+
return el.demandPopin;
108+
}).length;
109+
}
110+
105111
onBeforeRendering() {
112+
if (!this.shouldPopin) {
113+
return;
114+
}
115+
106116
this.visibleCells = [];
107117
this.popinCells = [];
108118

@@ -140,21 +150,6 @@ class TableRow extends UI5Element {
140150
}
141151
}
142152

143-
get styles() {
144-
const gridTemplateColumns = this._columnsInfo.reduce((acc, info) => {
145-
return info.visible ? `${acc}minmax(0, ${info.width || "1fr"}) ` : acc;
146-
}, "");
147-
148-
return {
149-
main: {
150-
"grid-template-columns": gridTemplateColumns,
151-
},
152-
popin: {
153-
"grid-column-end": 6,
154-
},
155-
};
156-
}
157-
158153
get visibleCellsCount() {
159154
return this.visibleCells.length;
160155
}

‎packages/main/test/pages/Table-perf-pure.html

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<title>Web components Table</title>
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<script data-config type="application/json">
10+
{
11+
"language": "EN"
12+
}
13+
</script>
14+
15+
<script>
16+
delete Document.prototype.adoptedStyleSheets
17+
</script>
18+
19+
<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
20+
<script src="../../resources/bundle.esm.js" type="module"></script>
21+
<script nomodule src="../../resources/bundle.es5.js"></script>
22+
23+
</head>
24+
25+
<!-- Initial - 2200 -->
26+
<!-- shouldPopin - 2000 -->
27+
<!-- remove ifDefined - 1850 -->
28+
29+
<body style="background-color: var(--sapBackgroundColor);">
30+
<table id="tbl">
31+
<tr>
32+
<th slot="columns">
33+
First
34+
</th>
35+
<th slot="columns">
36+
Second
37+
</th>
38+
<th slot="columns">
39+
Third
40+
</th>
41+
<th slot="columns">
42+
Fifth
43+
</th>
44+
<th slot="columns">
45+
Sixth
46+
</th>
47+
</tr>
48+
</table>
49+
50+
51+
<script>
52+
const tbl = document.getElementById("tbl");
53+
54+
55+
[...Array(1000)].map(item => {
56+
const row = document.createElement("tr");
57+
58+
[...Array(5)].map(_ => {
59+
const cell = document.createElement("td");
60+
const span = document.createElement("span");
61+
span.innerText = "Hello World!";
62+
63+
cell.appendChild(span);
64+
row.appendChild(cell);
65+
});
66+
67+
tbl.appendChild(row);
68+
})
69+
</script>
70+
</body>
71+
72+
</html>

‎packages/main/test/pages/Table-perf.html

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<title>Web components Table</title>
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<script data-ui5-config type="application/json">
10+
{
11+
"language": "EN"
12+
}
13+
</script>
14+
15+
<script>
16+
delete Document.prototype.adoptedStyleSheets
17+
</script>
18+
19+
<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
20+
<script src="../../resources/bundle.esm.js" type="module"></script>
21+
<script nomodule src="../../resources/bundle.es5.js"></script>
22+
23+
</head>
24+
25+
<!-- Initial - 2200 -->
26+
<!-- shouldPopin - 2000 -->
27+
<!-- remove ifDefined - 1850 -->
28+
29+
<body style="background-color: var(--sapBackgroundColor);">
30+
<ui5-table id="tbl">
31+
<ui5-table-column slot="columns">
32+
First
33+
</ui5-table-column>
34+
<ui5-table-column slot="columns">
35+
Second
36+
</ui5-table-column>
37+
<ui5-table-column slot="columns">
38+
Third
39+
</ui5-table-column>
40+
<ui5-table-column slot="columns">
41+
Fifth
42+
</ui5-table-column>
43+
<ui5-table-column slot="columns">
44+
Sixth
45+
</ui5-table-column>
46+
</ui5-table>
47+
48+
49+
<script>
50+
const tbl = document.getElementById("tbl");
51+
52+
53+
[...Array(1000)].map(item => {
54+
const row = document.createElement("ui5-table-row");
55+
56+
[...Array(5)].map(_ => {
57+
const cell = document.createElement("ui5-table-cell");
58+
const span = document.createElement("span");
59+
span.innerText = "Hello World!";
60+
61+
cell.appendChild(span);
62+
row.appendChild(cell);
63+
});
64+
65+
tbl.appendChild(row);
66+
})
67+
</script>
68+
</body>
69+
70+
</html>

0 commit comments

Comments
 (0)