Skip to content

Commit 11682a2

Browse files
vladitasevilhan007
vladitasev
authored and
ilhan007
committed
ui5-table: design implemented for popped-in columns (#1726)
1 parent 15de6b9 commit 11682a2

File tree

4 files changed

+96
-1
lines changed

4 files changed

+96
-1
lines changed

‎packages/main/src/TableRow.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919

2020
{{#if shouldPopin}}
2121
{{#each popinCells}}
22-
<tr part="popin-row" class="ui5-table-popin-row" @click="{{../_onrowclick}}">
22+
<tr part="popin-row" class="{{this.classes}}" @click="{{../_onrowclick}}">
2323
<td colspan="{{../visibleCellsCount}}">
2424
{{#if this.popinText}}
2525
<span class="ui5-table-row-popin-title">{{this.popinText}}:</span>

‎packages/main/src/TableRow.js

+7
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,10 @@ class TableRow extends UI5Element {
104104
}).length;
105105
}
106106

107+
get allColumnsPoppedIn() {
108+
return this._columnsInfo.every(el => el.demandPopin && !el.visible);
109+
}
110+
107111
onBeforeRendering() {
108112
if (!this.shouldPopin) {
109113
return;
@@ -116,6 +120,7 @@ class TableRow extends UI5Element {
116120
return;
117121
}
118122

123+
const allColumnsPoppedInClass = this.allColumnsPoppedIn ? "all-columns-popped-in" : "";
119124
this._columnsInfo.forEach((info, index) => {
120125
const cell = this.cells[index];
121126

@@ -128,9 +133,11 @@ class TableRow extends UI5Element {
128133
cell.firstInRow = (index === 0);
129134
cell.popined = false;
130135
} else if (info.demandPopin) {
136+
const popinHeaderClass = this.popinCells.length === 0 ? "popin-header" : "";
131137
this.popinCells.push({
132138
cell,
133139
popinText: info.popinText,
140+
classes: `ui5-table-popin-row ${allColumnsPoppedInClass} ${popinHeaderClass}`,
134141
});
135142

136143
cell.popined = true;

‎packages/main/src/themes/TableRow.css

+8
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,14 @@
1212
outline-offset: -0.125rem;
1313
}
1414

15+
.ui5-table-popin-row {
16+
background-color: var(--sapList_Background);
17+
}
18+
19+
.ui5-table-popin-row.all-columns-popped-in.popin-header {
20+
border-top: 1px solid var(--sapList_BorderColor);
21+
}
22+
1523
.ui5-table-popin-row td {
1624
padding: .25rem;
1725
padding-left: 1rem;

‎packages/main/test/pages/TableAllPopin.html

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
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.0, maximum-scale=1.0, user-scalable=no">
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+
<body style="background-color: var(--sapBackgroundColor);">
26+
27+
<ui5-table class="demo-table" id="tbl">
28+
<!-- Columns -->
29+
<ui5-table-column class="title-column" slot="columns" min-width="640" popin-text="Product" demand-popin>
30+
<ui5-label>Product</ui5-label>
31+
</ui5-table-column>
32+
33+
<ui5-table-column class="supplier-column" slot="columns" min-width="1024" popin-text="Supplier" demand-popin>
34+
<ui5-label>Supplier</ui5-label>
35+
</ui5-table-column>
36+
37+
<ui5-table-column class="dim-column" slot="columns" min-width="800" popin-text="Dimensions" demand-popin>
38+
<div class="column-content">
39+
<ui5-label>Dimensions</ui5-label>
40+
</div>
41+
</ui5-table-column>
42+
43+
<ui5-table-column class="weight-column" slot="columns" min-width="640" popin-text="Weight" demand-popin>
44+
<ui5-label>Weight</ui5-label>
45+
</ui5-table-column>
46+
47+
<ui5-table-column class="price-column" slot="columns" min-width="640" popin-text="Price" demand-popin>
48+
<ui5-label>Price</ui5-label>
49+
</ui5-table-column>
50+
51+
52+
<ui5-table-row id="row1">
53+
<ui5-table-cell class="title-cell">Notebook Basic 15</ui5-table-cell>
54+
<ui5-table-cell>Very Best Screens</ui5-table-cell>
55+
<ui5-table-cell>30 x 18 x 3 cm</ui5-table-cell>
56+
<ui5-table-cell>4.2 KG</ui5-table-cell>
57+
<ui5-table-cell class="price-cell">956 EUR</ui5-table-cell>
58+
</ui5-table-row>
59+
60+
<ui5-table-row id="row2">
61+
<ui5-table-cell class="title-cell">Notebook Basic 17</ui5-table-cell>
62+
<ui5-table-cell>Very Best Screens</ui5-table-cell>
63+
<ui5-table-cell>40 x 18 x 3 cm</ui5-table-cell>
64+
<ui5-table-cell>4.6 KG</ui5-table-cell>
65+
<ui5-table-cell class="price-cell">1956 EUR</ui5-table-cell>
66+
</ui5-table-row>
67+
68+
<ui5-table-row id="row3">
69+
<ui5-table-cell class="title-cell">Notebook Basic 19</ui5-table-cell>
70+
<ui5-table-cell>Very Best Screens</ui5-table-cell>
71+
<ui5-table-cell>50 x 18 x 3 cm</ui5-table-cell>
72+
<ui5-table-cell>4.9 KG</ui5-table-cell>
73+
<ui5-table-cell class="price-cell">2956 EUR</ui5-table-cell>
74+
</ui5-table-row>
75+
76+
</ui5-table>
77+
78+
</body>
79+
80+
</html>

0 commit comments

Comments
 (0)