From abe8a1aeb2edfb5d80313ec045de9901ac22e627 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 10 Apr 2024 19:27:44 +0100
Subject: [PATCH] Adds alignment for `umb-table` table-cells

After chatting with @mattbrailsford about this,
I wanted to explore if it was possible.
---
 .../core/components/table/table.element.ts      | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts
index 43234edd3d..de12b4b965 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts
@@ -30,6 +30,7 @@ export interface UmbTableColumn {
 	elementName?: string;
 	width?: string;
 	allowSorting?: boolean;
+	align?: 'left' | 'center' | 'right';
 }
 
 export interface UmbTableColumnLayoutElement extends HTMLElement {
@@ -176,7 +177,9 @@ export class UmbTableElement extends LitElement {
 	private _renderHeaderCell(column: UmbTableColumn) {
 		return html`
 			<uui-table-head-cell style="--uui-table-cell-padding: 0 var(--uui-size-5)">
-				${column.allowSorting ? html`${this._renderSortingUI(column)}` : column.name}
+				${column.allowSorting
+					? html`${this._renderSortingUI(column)}`
+					: html`<span style="text-align:${column.align ?? 'left'};">${column.name}</span>`}
 			</uui-table-head-cell>
 		`;
 	}
@@ -186,7 +189,7 @@ export class UmbTableElement extends LitElement {
 			<button
 				style="padding: var(--uui-size-4) var(--uui-size-5);"
 				@click="${() => this._handleOrderingChange(column)}">
-				${column.name}
+				<span style="text-align:${column.align ?? 'left'};">${column.name}</span>
 				<uui-symbol-sort ?active=${this.orderingColumn === column.alias} ?descending=${this.orderingDesc}>
 				</uui-symbol-sort>
 			</button>
@@ -240,8 +243,11 @@ export class UmbTableElement extends LitElement {
 	}
 
 	private _renderRowCell(column: UmbTableColumn, item: UmbTableItem) {
-		return html`<uui-table-cell style="--uui-table-cell-padding: 0 var(--uui-size-5); width: ${column.width || 'auto'}"
-			>${this._renderCellContent(column, item)}</uui-table-cell>
+		return html`
+			<uui-table-cell
+				style="--uui-table-cell-padding: 0 var(--uui-size-5); text-align:${column.align ?? 'left'}; width: ${column.width || 'auto'};">
+					${this._renderCellContent(column, item)}
+			</uui-table-cell>
 		</uui-table-cell>`;
 	}
 
@@ -313,6 +319,9 @@ export class UmbTableElement extends LitElement {
 				justify-content: space-between;
 				width: 100%;
 			}
+			uui-table-head-cell button > span {
+				flex: 1 0 auto;
+			}
 
 			uui-table-cell uui-icon {
 				vertical-align: top;