Skip to content

Commit 232e7f5

Browse files
vladitasevvladitasev
authored
feat(ui5-table): allow for custom styling (#1627)
1 parent 1786593 commit 232e7f5

File tree

5 files changed

+148
-22
lines changed

5 files changed

+148
-22
lines changed

‎packages/main/src/TableCell.hbs

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1-
<td @click="{{_onclick}}" tabindex="-1">
1+
<td
2+
@click="{{_onclick}}"
3+
tabindex="-1"
4+
part="cell"
5+
>
26
<slot></slot>
3-
</td>
7+
</td>

‎packages/main/src/TableColumn.hbs

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
<th scope="col">
2-
<div class="ui5-table-column-root">
3-
<slot></slot>
4-
</div>
5-
</th>
1+
<th
2+
scope="col"
3+
part="column"
4+
>
5+
<slot></slot>
6+
</th>

‎packages/main/src/TableRow.hbs

+4-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
tabindex="{{_tabIndex}}"
44
@focusin="{{_onfocusin}}"
55
@ui5-_cellclick="{{_oncellclick}}"
6-
data-sap-focus-ref>
6+
data-sap-focus-ref
7+
part="row"
8+
>
79
{{#if shouldPopin}}
810
{{#each visibleCells}}
911
<slot name="{{this._individualSlot}}"></slot>
@@ -17,7 +19,7 @@
1719

1820
{{#if shouldPopin}}
1921
{{#each popinCells}}
20-
<tr class="ui5-table-popin-row" @ui5-_cellclick="{{_oncellclick}}">
22+
<tr part="popin-row" class="ui5-table-popin-row" @ui5-_cellclick="{{_oncellclick}}">
2123
<td colspan="{{../visibleCellsCount}}">
2224
{{#if this.popinText}}
2325
<span class="ui5-table-row-popin-title">{{this.popinText}}:</span>

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

+6-13
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,20 @@
22
display: contents;
33
}
44

5-
:host .ui5-table-column-root {
6-
padding: 0.25rem;
7-
box-sizing: border-box;
8-
}
9-
105
th {
116
background: var(--sapList_HeaderBackground);
12-
border-bottom: 1px solid var(--sapList_BorderColor);
137
border: none;
8+
border-bottom: 1px solid var(--sapList_BorderColor);
149
width: inherit;
1510
font-weight: normal;
16-
}
17-
18-
.ui5-table-column-root {
19-
display: flex;
11+
padding: 0.25rem;
12+
box-sizing: border-box;
2013
height: 3rem;
21-
justify-content: flex-start;
22-
align-items: center;
14+
text-align: left;
15+
vertical-align: middle;
2316
}
2417

25-
:host([first]) .ui5-table-column-root {
18+
:host([first]) th {
2619
padding-left: 1rem;
2720
}
2821

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

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
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+
<style>
26+
.demo-table {
27+
width: 100%;
28+
}
29+
30+
body,
31+
html {
32+
margin: 0;
33+
height: 100%;
34+
}
35+
36+
/* All rows - height */
37+
#tbl ui5-table-row::part(row) {
38+
height: 4rem;
39+
}
40+
/* One row - higher than the rest */
41+
#tbl ui5-table-row#row3::part(row) {
42+
height: 6rem;
43+
}
44+
45+
/* All columns - center both vertically and horizontally */
46+
#tbl ui5-table-column::part(column) {
47+
vertical-align: middle;
48+
text-align: center;
49+
}
50+
51+
/* All cells - center both vertically and horizontally */
52+
#tbl ui5-table-cell::part(cell) {
53+
vertical-align: middle;
54+
text-align: center;
55+
}
56+
57+
/* Title column & cells - left aligned */
58+
#tbl ui5-table-cell.title-cell::part(cell),
59+
#tbl ui5-table-column.title-column::part(column) {
60+
text-align: left;
61+
}
62+
63+
/* Price column & cells - right aligned with some padding */
64+
#tbl ui5-table-cell.price-cell::part(cell),
65+
#tbl ui5-table-column.price-column::part(column) {
66+
text-align: right;
67+
padding-right: 0.75rem;
68+
}
69+
</style>
70+
71+
<body style="background-color: var(--sapBackgroundColor);">
72+
73+
<ui5-table class="demo-table" id="tbl">
74+
<!-- Columns -->
75+
<ui5-table-column class="title-column" slot="columns">
76+
<ui5-label>Product</ui5-label>
77+
</ui5-table-column>
78+
79+
<ui5-table-column class="supplier-column" slot="columns" min-width="1024" popin-text="Supplier">
80+
<ui5-label>Supplier</ui5-label>
81+
</ui5-table-column>
82+
83+
<ui5-table-column class="dim-column" slot="columns" min-width="800" popin-text="Dimensions" demand-popin>
84+
<div class="column-content">
85+
<ui5-label>Dimensions</ui5-label>
86+
</div>
87+
</ui5-table-column>
88+
89+
<ui5-table-column class="weight-column" slot="columns" min-width="640" popin-text="Weight" demand-popin>
90+
<ui5-label>Weight</ui5-label>
91+
</ui5-table-column>
92+
93+
<ui5-table-column class="price-column" slot="columns">
94+
<ui5-label>Price</ui5-label>
95+
</ui5-table-column>
96+
97+
98+
<ui5-table-row id="row1">
99+
<ui5-table-cell class="title-cell">Notebook Basic 15</ui5-table-cell>
100+
<ui5-table-cell>Very Best Screens</ui5-table-cell>
101+
<ui5-table-cell>30 x 18 x 3 cm</ui5-table-cell>
102+
<ui5-table-cell>4.2 KG</ui5-table-cell>
103+
<ui5-table-cell class="price-cell">956 EUR</ui5-table-cell>
104+
</ui5-table-row>
105+
106+
<ui5-table-row id="row2">
107+
<ui5-table-cell class="title-cell">Notebook Basic 17</ui5-table-cell>
108+
<ui5-table-cell>Very Best Screens</ui5-table-cell>
109+
<ui5-table-cell>40 x 18 x 3 cm</ui5-table-cell>
110+
<ui5-table-cell>4.6 KG</ui5-table-cell>
111+
<ui5-table-cell class="price-cell">1956 EUR</ui5-table-cell>
112+
</ui5-table-row>
113+
114+
<ui5-table-row id="row3">
115+
<ui5-table-cell class="title-cell">Notebook Basic 19</ui5-table-cell>
116+
<ui5-table-cell>Very Best Screens</ui5-table-cell>
117+
<ui5-table-cell>50 x 18 x 3 cm</ui5-table-cell>
118+
<ui5-table-cell>4.9 KG</ui5-table-cell>
119+
<ui5-table-cell class="price-cell">2956 EUR</ui5-table-cell>
120+
</ui5-table-row>
121+
122+
</ui5-table>
123+
124+
</body>
125+
126+
</html>

0 commit comments

Comments
 (0)