Skip to content

Commit 65f75eb

Browse files
nowakdanielnowakdaniel
authored
feat(ui5-table): adding horizontal column alignment (#9639)
Introduction of a new property horizontalAlign. horizontalAlign is used to configure the horizontal alignment. The idea is to configure the horizontal alignment on the header level of the Table and then automatically adjust the alignment of the cells according to their header cell.
1 parent 3330f01 commit 65f75eb

File tree

13 files changed

+446
-2
lines changed

13 files changed

+446
-2
lines changed

‎packages/main/src/Table.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -465,9 +465,16 @@ class Table extends UI5Element {
465465
}
466466

467467
get styles() {
468+
const headerStyleMap = this.headerRow?.[0]?.cells?.reduce((headerStyles, headerCell) => {
469+
if (headerCell.horizontalAlign !== undefined) {
470+
headerStyles[`--horizontal-align-${headerCell._individualSlot}`] = headerCell.horizontalAlign;
471+
}
472+
return headerStyles;
473+
}, {} as { [key: string]: string });
468474
return {
469475
table: {
470476
"grid-template-columns": this._gridTemplateColumns,
477+
...headerStyleMap,
471478
},
472479
};
473480
}

‎packages/main/src/TableCell.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,15 @@ import { LABEL_COLON } from "./generated/i18n/i18n-defaults.js";
3030
template: TableCellTemplate,
3131
})
3232
class TableCell extends TableCellBase {
33+
onBeforeRendering() {
34+
super.onBeforeRendering();
35+
if (this.horizontalAlign) {
36+
this.style.justifyContent = this.horizontalAlign;
37+
} else {
38+
this.style.justifyContent = `var(--horizontal-align-${(this as any)._individualSlot})`;
39+
}
40+
}
41+
3342
get _popinHeader() {
3443
const row = this.parentElement as TableRow;
3544
const table = row.parentElement as Table;

‎packages/main/src/TableCellBase.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
66
import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
77
import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
88
import TableCellBaseStyles from "./generated/themes/TableCellBase.css.js";
9+
import type TableCellHorizontalAlign from "./types/TableCellHorizontalAlign.js";
910

1011
/**
1112
* @class
@@ -31,6 +32,17 @@ abstract class TableCellBase extends UI5Element {
3132
@property({ type: Boolean })
3233
_popin = false;
3334

35+
/**
36+
* Determines the horizontal alignment of table cells.
37+
* Note: All values valid for justify-content can be used not just the ones inside the enum.
38+
* @default undefined
39+
* @public
40+
*/
41+
@property()
42+
horizontalAlign?: `${TableCellHorizontalAlign}`;
43+
44+
_individualSlot?: string;
45+
3446
protected ariaRole: string = "gridcell";
3547

3648
static i18nBundle: I18nBundle;

‎packages/main/src/TableHeaderCell.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,12 @@ class TableHeaderCell extends TableCellBase {
8585
this.style.maxWidth = this.maxWidth;
8686
this.style.width = this.width;
8787
}
88+
89+
onBeforeRendering() {
90+
super.onBeforeRendering();
91+
// overwrite setting of TableCellBase so that the TableHeaderCell always uses the slot variable
92+
this.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`;
93+
}
8894
}
8995

9096
TableHeaderCell.define();

‎packages/main/src/TableHeaderRow.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ class TableHeaderRow extends TableRowBase {
5656
type: HTMLElement,
5757
"default": true,
5858
invalidateOnChildChange: {
59-
properties: ["width", "_popin"],
59+
properties: ["width", "_popin", "horizontalAlign"],
6060
slots: false,
6161
},
6262
individualSlots: true,

‎packages/main/src/types/TableCellHorizontalAlign.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/**
2+
* Alignment of the <ui5-table-cell> component.
3+
*
4+
* @public
5+
*/
6+
enum TableCellHorizontalAlign {
7+
/**
8+
* @public
9+
*/
10+
Left = "Left",
11+
12+
/**
13+
* @public
14+
*/
15+
Start = "Start",
16+
17+
/**
18+
* @public
19+
*/
20+
Right = "Right",
21+
22+
/**
23+
* @public
24+
*/
25+
End = "End",
26+
27+
/**
28+
* @public
29+
*/
30+
Center = "Center",
31+
}
32+
33+
export default TableCellHorizontalAlign;

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<script src="%VITE_BUNDLE_PATH%" type="module"></script>
8+
<title>Table (horizontal alignment)</title>
9+
</head>
10+
11+
<body style="background-color: var(--sapBackgroundColor)">
12+
<div class="section">
13+
<ui5-table id="table" overflow-mode="Popin">
14+
<ui5-table-header-row slot="headerRow">
15+
<ui5-table-header-cell id="productCol" width="300px"><span>Product</span></ui5-table-header-cell>
16+
<ui5-table-header-cell id="supplierCol" horizontal-align="Center" width="200px">Supplier</ui5-table-header-cell>
17+
<ui5-table-header-cell id="dimensionsCol" horizontal-align="Right" width="300px">Dimensions</ui5-table-header-cell>
18+
<ui5-table-header-cell id="weightCol" width="100px">Weight</ui5-table-header-cell>
19+
<ui5-table-header-cell id="priceCol" width="220px">Price</ui5-table-header-cell>
20+
</ui5-table-header-row>
21+
<ui5-table-row>
22+
<ui5-table-cell><ui5-label><b>Notebook Basic 15</b><br>HT-1000</ui5-label></ui5-table-cell>
23+
<ui5-table-cell><ui5-label>Very Best Screens</ui5-label></ui5-table-cell>
24+
<ui5-table-cell><ui5-label>30 x 18 x 3 cm</ui5-label></ui5-table-cell>
25+
<ui5-table-cell><ui5-label style="color: #2b7c2b"><b>4.2</b> KG</ui5-label></ui5-table-cell>
26+
<ui5-table-cell><ui5-label><b>956</b> EUR</ui5-label></ui5-table-cell>
27+
</ui5-table-row>
28+
<ui5-table-row>
29+
<ui5-table-cell><ui5-label><b>Notebook Basic 17</b><br>HT-1001</ui5-label></ui5-table-cell>
30+
<ui5-table-cell><ui5-label>Smartcards</ui5-label></ui5-table-cell>
31+
<ui5-table-cell><ui5-label>29 x 17 x 3.1 cm</ui5-label></ui5-table-cell>
32+
<ui5-table-cell><ui5-label style="color: #2b7c2b"><b>4.5</b> KG</ui5-label></ui5-table-cell>
33+
<ui5-table-cell><ui5-label><b>1249</b> EUR</ui5-label></ui5-table-cell>
34+
</ui5-table-row>
35+
<ui5-table-row>
36+
<ui5-table-cell><ui5-label><b>Notebook Basic 18</b><br>HT-1002</ui5-label></ui5-table-cell>
37+
<ui5-table-cell><ui5-label>Technocom</ui5-label></ui5-table-cell>
38+
<ui5-table-cell><ui5-label>32 x 21 x 4 cm</ui5-label></ui5-table-cell>
39+
<ui5-table-cell><ui5-label style="color: #2b7c2b"><b>3.7</b> KG</ui5-label></ui5-table-cell>
40+
<ui5-table-cell><ui5-label><b>29</b> EUR</ui5-label></ui5-table-cell>
41+
</ui5-table-row>
42+
</ui5-table>
43+
</div>
44+
</body>
45+
46+
</html>

0 commit comments

Comments
 (0)