From e24b6c5d370821953b6903c0fe85be2868b9861a Mon Sep 17 00:00:00 2001
From: Mark Cuypers <mark_cuypers@peopleware.be>
Date: Wed, 21 Jan 2026 09:36:54 +0100
Subject: [PATCH 1/3] Add styling to correctly align the table headers

---
 .../src/lib/table/table.component.scss               | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/projects/ppwcode/ng-common-components/src/lib/table/table.component.scss b/projects/ppwcode/ng-common-components/src/lib/table/table.component.scss
index c8b5e5c5..fb48b91c 100644
--- a/projects/ppwcode/ng-common-components/src/lib/table/table.component.scss
+++ b/projects/ppwcode/ng-common-components/src/lib/table/table.component.scss
@@ -1,5 +1,17 @@
 @use '@angular/material' as mat;
 
+:host ::ng-deep th[style*='text-align: right'] {
+    .mat-sort-header-container {
+        justify-content: end;
+    }
+}
+
+:host ::ng-deep th[style*='text-align: center'] {
+    .mat-sort-header-container {
+        justify-content: center;
+    }
+}
+
 .ppw-table-container {
     overflow: auto;
 

From 64c25a47b19ebe5d8ebd918c8c511633509334ac Mon Sep 17 00:00:00 2001
From: Mark Cuypers <mark_cuypers@peopleware.be>
Date: Wed, 21 Jan 2026 09:50:14 +0100
Subject: [PATCH 2/3] When a header column is right aligned, show the sort icon
 before the header label

---
 .../src/lib/table/abstract-table.component.ts        | 12 ++++++++++++
 .../src/lib/table/table.component.html               |  1 +
 2 files changed, 13 insertions(+)

diff --git a/projects/ppwcode/ng-common-components/src/lib/table/abstract-table.component.ts b/projects/ppwcode/ng-common-components/src/lib/table/abstract-table.component.ts
index 9f8a0cae..f74152f7 100644
--- a/projects/ppwcode/ng-common-components/src/lib/table/abstract-table.component.ts
+++ b/projects/ppwcode/ng-common-components/src/lib/table/abstract-table.component.ts
@@ -123,6 +123,18 @@ export abstract class AbstractTableComponent<TRecord, TData = FormArray<FormGrou
     public dataSource: WritableSignal<MatTableDataSource<TableRecord<TRecord>>> = linkedSignal(() => {
         return new MatTableDataSource(this.localRecords())
     })
+    public arrowPositions = computed(() => {
+        const columns = this.columns()
+        const headerStyles = this.options()?.header?.styles
+        const textAlignConst = 'text-align'
+        const alignRightConst = 'right'
+
+        return columns.reduce<Record<string, 'before' | 'after'>>((positionsByColumn, column) => {
+            const textAlign = headerStyles?.[column.name]?.()?.[textAlignConst]
+            positionsByColumn[column.name] = textAlign === alignRightConst ? 'before' : 'after'
+            return positionsByColumn
+        }, {})
+    })
 
     public selection = new SelectionModel<TableRecord<TRecord>>(
         true,
diff --git a/projects/ppwcode/ng-common-components/src/lib/table/table.component.html b/projects/ppwcode/ng-common-components/src/lib/table/table.component.html
index 197ad438..ff7eacc3 100644
--- a/projects/ppwcode/ng-common-components/src/lib/table/table.component.html
+++ b/projects/ppwcode/ng-common-components/src/lib/table/table.component.html
@@ -65,6 +65,7 @@
                 <th
                     mat-header-cell
                     mat-sort-header
+                    [arrowPosition]="arrowPositions()[column.name]"
                     [disabled]="!column.sortable()"
                     [disableClear]="column.disableSortClear()"
                     [style.width]="options()?.columns?.widths?.[column.name]"

From 47f1fdf6b4bb1cd6f85b5a92dfff5d828887168a Mon Sep 17 00:00:00 2001
From: Mark Cuypers <mark_cuypers@peopleware.be>
Date: Wed, 21 Jan 2026 09:50:40 +0100
Subject: [PATCH 3/3] Update the table demo to align the header columns the
 same as the data columns

---
 src/app/table/table-demo.component.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/app/table/table-demo.component.ts b/src/app/table/table-demo.component.ts
index 70802934..ec523d2d 100644
--- a/src/app/table/table-demo.component.ts
+++ b/src/app/table/table-demo.component.ts
@@ -169,6 +169,15 @@ export default class TableDemoComponent
                 rowIndex: () => {
                     return { 'text-align': 'right' }
                 },
+                age: () => {
+                    return { 'text-align': 'right' }
+                },
+                income: () => {
+                    return { 'text-align': 'right' }
+                },
+                bonus: () => {
+                    return { 'text-align': 'right' }
+                },
                 active: () => {
                     return { 'text-align': 'center' }
                 }