From 90b51dde45d15524cc571146c72437612ba713c4 Mon Sep 17 00:00:00 2001 From: Mark Cuypers Date: Tue, 27 Jan 2026 11:12:48 +0100 Subject: [PATCH 1/3] Nest styling --- .../src/lib/table/table.component.scss | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) 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 fb48b91..97ee33b 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,14 +1,18 @@ @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: right'] { + .mat-sort-header-container { + justify-content: end; + } + } -:host ::ng-deep th[style*='text-align: center'] { - .mat-sort-header-container { - justify-content: center; + th[style*='text-align: center'] { + .mat-sort-header-container { + justify-content: center; + } + } } } From d4cc6b10c576f34132ea6dc136d2aad4e456b0ce Mon Sep 17 00:00:00 2001 From: Mark Cuypers Date: Tue, 27 Jan 2026 11:13:14 +0100 Subject: [PATCH 2/3] Numeric columns should be aligned to right automatically. --- .../src/lib/table/abstract-table.component.ts | 3 ++- .../ng-common-components/src/lib/table/table.component.scss | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) 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 f74152f..75150fa 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 @@ -131,7 +131,8 @@ export abstract class AbstractTableComponent>((positionsByColumn, column) => { const textAlign = headerStyles?.[column.name]?.()?.[textAlignConst] - positionsByColumn[column.name] = textAlign === alignRightConst ? 'before' : 'after' + positionsByColumn[column.name] = + textAlign === alignRightConst || column.type === ColumnType.Number ? 'before' : 'after' return positionsByColumn }, {}) }) 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 97ee33b..a61621a 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 @@ -2,6 +2,7 @@ :host { ::ng-deep { + th.ppw-column-type-number, th[style*='text-align: right'] { .mat-sort-header-container { justify-content: end; From f107d664718952e5cbe8eb6efd687f5fa9a2fd95 Mon Sep 17 00:00:00 2001 From: Mark Cuypers Date: Tue, 27 Jan 2026 11:13:50 +0100 Subject: [PATCH 3/3] Update table demo to not specify explicitly to align numeric columns right --- src/app/table/table-demo.component.ts | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/app/table/table-demo.component.ts b/src/app/table/table-demo.component.ts index ec523d2..7080293 100644 --- a/src/app/table/table-demo.component.ts +++ b/src/app/table/table-demo.component.ts @@ -169,15 +169,6 @@ 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' } }