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.
SAP · Sep 30, 2024 · 65f75eb · 65f75eb
1 parent 3330f01
commit 65f75eb
Show file tree

Hide file tree

Showing 13 changed files with 446 additions and 2 deletions.
diff --git a/packages/main/src/Table.ts b/packages/main/src/Table.ts
@@ -465,9 +465,16 @@ class Table extends UI5Element {
 	}
 
 	get styles() {
+		const headerStyleMap = this.headerRow?.[0]?.cells?.reduce((headerStyles, headerCell) => {
+			if (headerCell.horizontalAlign !== undefined) {
+				headerStyles[`--horizontal-align-${headerCell._individualSlot}`] = headerCell.horizontalAlign;
+			}
+			return headerStyles;
+		}, {} as { [key: string]: string });
 		return {
 			table: {
 				"grid-template-columns": this._gridTemplateColumns,
+				...headerStyleMap,
 			},
 		};
 	}

diff --git a/packages/main/src/TableCell.ts b/packages/main/src/TableCell.ts
@@ -30,6 +30,15 @@ import { LABEL_COLON } from "./generated/i18n/i18n-defaults.js";
 	template: TableCellTemplate,
 })
 class TableCell extends TableCellBase {
+	onBeforeRendering() {
+		super.onBeforeRendering();
+		if (this.horizontalAlign) {
+			this.style.justifyContent = this.horizontalAlign;
+		} else {
+			this.style.justifyContent = `var(--horizontal-align-${(this as any)._individualSlot})`;
+		}
+	}
+
 	get _popinHeader() {
 		const row = this.parentElement as TableRow;
 		const table = row.parentElement as Table;

diff --git a/packages/main/src/TableCellBase.ts b/packages/main/src/TableCellBase.ts
@@ -6,6 +6,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import TableCellBaseStyles from "./generated/themes/TableCellBase.css.js";
+import type TableCellHorizontalAlign from "./types/TableCellHorizontalAlign.js";
 
 /**
  * @class
@@ -31,6 +32,17 @@ abstract class TableCellBase extends UI5Element {
 	@property({ type: Boolean })
 	_popin = false;
 
+	/**
+	 * Determines the horizontal alignment of table cells.
+	 * Note: All values valid for justify-content can be used not just the ones inside the enum.
+	 * @default undefined
+	 * @public
+	 */
+	@property()
+    horizontalAlign?: `${TableCellHorizontalAlign}`;
+
+	_individualSlot?: string;
+
 	protected ariaRole: string = "gridcell";
 
 	static i18nBundle: I18nBundle;

diff --git a/packages/main/src/TableHeaderCell.ts b/packages/main/src/TableHeaderCell.ts
@@ -85,6 +85,12 @@ class TableHeaderCell extends TableCellBase {
 		this.style.maxWidth = this.maxWidth;
 		this.style.width = this.width;
 	}
+
+	onBeforeRendering() {
+		super.onBeforeRendering();
+		// overwrite setting of TableCellBase so that the TableHeaderCell always uses the slot variable
+		this.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`;
+	}
 }
 
 TableHeaderCell.define();

diff --git a/packages/main/src/TableHeaderRow.ts b/packages/main/src/TableHeaderRow.ts
@@ -56,7 +56,7 @@ class TableHeaderRow extends TableRowBase {
 		type: HTMLElement,
 		"default": true,
 		invalidateOnChildChange: {
-			properties: ["width", "_popin"],
+			properties: ["width", "_popin", "horizontalAlign"],
 			slots: false,
 		},
 		individualSlots: true,

diff --git a/packages/main/src/types/TableCellHorizontalAlign.ts b/packages/main/src/types/TableCellHorizontalAlign.ts
@@ -0,0 +1,33 @@
+/**
+ * Alignment of the &lt;ui5-table-cell&gt; component.
+ *
+ * @public
+ */
+enum TableCellHorizontalAlign {
+    /**
+     * @public
+     */
+    Left = "Left",
+
+    /**
+     * @public
+     */
+    Start = "Start",
+
+    /**
+     * @public
+     */
+    Right = "Right",
+
+    /**
+     * @public
+     */
+    End = "End",
+
+    /**
+     * @public
+     */
+    Center = "Center",
+}
+
+export default TableCellHorizontalAlign;
diff --git a/packages/main/test/pages/HAlignTable.html b/packages/main/test/pages/HAlignTable.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
+    <title>Table (horizontal alignment)</title>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor)">
+    <div class="section">
+		<ui5-table id="table" overflow-mode="Popin">
+			<ui5-table-header-row slot="headerRow">
+				<ui5-table-header-cell id="productCol" width="300px"><span>Product</span></ui5-table-header-cell>
+				<ui5-table-header-cell id="supplierCol" horizontal-align="Center" width="200px">Supplier</ui5-table-header-cell>
+				<ui5-table-header-cell id="dimensionsCol" horizontal-align="Right" width="300px">Dimensions</ui5-table-header-cell>
+				<ui5-table-header-cell id="weightCol" width="100px">Weight</ui5-table-header-cell>
+				<ui5-table-header-cell id="priceCol" width="220px">Price</ui5-table-header-cell>
+			</ui5-table-header-row>
+			<ui5-table-row>
+				<ui5-table-cell><ui5-label><b>Notebook Basic 15</b><br>HT-1000</ui5-label></ui5-table-cell>
+				<ui5-table-cell><ui5-label>Very Best Screens</ui5-label></ui5-table-cell>
+				<ui5-table-cell><ui5-label>30 x 18 x 3 cm</ui5-label></ui5-table-cell>
+				<ui5-table-cell><ui5-label style="color: #2b7c2b"><b>4.2</b> KG</ui5-label></ui5-table-cell>
+				<ui5-table-cell><ui5-label><b>956</b> EUR</ui5-label></ui5-table-cell>
+			</ui5-table-row>
+			<ui5-table-row>
+				<ui5-table-cell><ui5-label><b>Notebook Basic 17</b><br>HT-1001</ui5-label></ui5-table-cell>
+				<ui5-table-cell><ui5-label>Smartcards</ui5-label></ui5-table-cell>
+				<ui5-table-cell><ui5-label>29 x 17 x 3.1 cm</ui5-label></ui5-table-cell>
+				<ui5-table-cell><ui5-label style="color: #2b7c2b"><b>4.5</b> KG</ui5-label></ui5-table-cell>
+				<ui5-table-cell><ui5-label><b>1249</b> EUR</ui5-label></ui5-table-cell>
+			</ui5-table-row>
+			<ui5-table-row>
+				<ui5-table-cell><ui5-label><b>Notebook Basic 18</b><br>HT-1002</ui5-label></ui5-table-cell>
+				<ui5-table-cell><ui5-label>Technocom</ui5-label></ui5-table-cell>
+				<ui5-table-cell><ui5-label>32 x 21 x 4 cm</ui5-label></ui5-table-cell>
+				<ui5-table-cell><ui5-label style="color: #2b7c2b"><b>3.7</b> KG</ui5-label></ui5-table-cell>
+				<ui5-table-cell><ui5-label><b>29</b> EUR</ui5-label></ui5-table-cell>
+			</ui5-table-row>
+		</ui5-table>
+	</div>
+</body>
+
+</html>