Bugfix/table header alignment (99)

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,

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]"

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;
 

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' }
                 }