From 53cfc6a81779c7e30b7bbfd1425940180dfa74a8 Mon Sep 17 00:00:00 2001 From: Fahri Gedik Date: Mon, 1 Sep 2025 17:01:41 +0300 Subject: [PATCH 1/4] Improve column width handling in ExtensibleTable Updated the table to use default widths when columnWidths are undefined and added canAutoResize binding. Added logic in the component to reset column widths if any are missing, ensuring consistent table rendering. --- .../extensible-table/extensible-table.component.html | 8 +++++--- .../extensible-table/extensible-table.component.ts | 5 +++++ 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html index 85eb36ffee..bfedbe8a44 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html @@ -40,8 +40,9 @@ @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) { @@ -59,7 +60,8 @@ @for (prop of propList; track prop.name; let i = $index) { implements OnChanges, AfterViewIn return record; }); + + if ((this.columnWidths as any)?.some?.((w: number | undefined) => w == null)) { + this.setColumnWidths(this.columnWidths?.[0] as any); + this.cdr.markForCheck(); + } } isVisibleActions(rowData: any): boolean { From 3f41906037d0475ba9b484376e77e60004066802 Mon Sep 17 00:00:00 2001 From: Fahri Gedik Date: Mon, 1 Sep 2025 17:13:43 +0300 Subject: [PATCH 2/4] Revert "Improve column width handling in ExtensibleTable" This reverts commit 53cfc6a81779c7e30b7bbfd1425940180dfa74a8. --- .../extensible-table/extensible-table.component.html | 8 +++----- .../extensible-table/extensible-table.component.ts | 5 ----- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html index bfedbe8a44..85eb36ffee 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html @@ -40,9 +40,8 @@ @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) { @@ -60,8 +59,7 @@ @for (prop of propList; track prop.name; let i = $index) { implements OnChanges, AfterViewIn return record; }); - - if ((this.columnWidths as any)?.some?.((w: number | undefined) => w == null)) { - this.setColumnWidths(this.columnWidths?.[0] as any); - this.cdr.markForCheck(); - } } isVisibleActions(rowData: any): boolean { From 436dbc69ba382d54ada4ae4ad1adf3d96b2ed178 Mon Sep 17 00:00:00 2001 From: Fahri Gedik Date: Tue, 2 Sep 2025 10:06:08 +0300 Subject: [PATCH 3/4] Reapply "Improve column width handling in ExtensibleTable" This reverts commit 3f41906037d0475ba9b484376e77e60004066802. --- .../extensible-table/extensible-table.component.html | 8 +++++--- .../extensible-table/extensible-table.component.ts | 5 +++++ 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html index 85eb36ffee..bfedbe8a44 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html @@ -40,8 +40,9 @@ @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) { @@ -59,7 +60,8 @@ @for (prop of propList; track prop.name; let i = $index) { implements OnChanges, AfterViewIn return record; }); + + if ((this.columnWidths as any)?.some?.((w: number | undefined) => w == null)) { + this.setColumnWidths(this.columnWidths?.[0] as any); + this.cdr.markForCheck(); + } } isVisibleActions(rowData: any): boolean { From 0f23ce685acbb798abd4d4a4409ab0a4a8b7d88f Mon Sep 17 00:00:00 2001 From: Fahri Gedik Date: Tue, 2 Sep 2025 10:10:04 +0300 Subject: [PATCH 4/4] Refactor column width handling with signals and computed Replaces manual column width management with Angular signals and computed properties for improved reactivity and code clarity in ExtensibleTableComponent. Removes the setColumnWidths method and updates the actionsColumnWidth input to use a signal. --- .../extensible-table.component.ts | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts index 3044859875..fdb19e553d 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts @@ -3,6 +3,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, + computed, EventEmitter, inject, Injector, @@ -10,9 +11,11 @@ import { LOCALE_ID, OnChanges, Output, + signal, SimpleChanges, TemplateRef, TrackByFunction, + ViewChild, } from '@angular/core'; import { AsyncPipe, NgComponentOutlet, NgTemplateOutlet } from '@angular/common'; @@ -97,7 +100,7 @@ export class ExtensibleTableComponent implements OnChanges, AfterViewIn @Input() recordsTotal!: number; @Input() set actionsColumnWidth(width: number) { - this.setColumnWidths(width ? Number(width) : undefined); + this._actionsColumnWidth.set(width ? Number(width) : undefined); } @Input() actionsTemplate?: TemplateRef; @@ -117,14 +120,24 @@ export class ExtensibleTableComponent implements OnChanges, AfterViewIn hasAtLeastOnePermittedAction: boolean; - readonly columnWidths!: number[]; - readonly propList: EntityPropList; readonly actionList: EntityActionList; readonly trackByFn: TrackByFunction> = (_, item) => item.name; + // Signal for actions column width + private readonly _actionsColumnWidth = signal(DEFAULT_ACTIONS_COLUMN_WIDTH); + + readonly columnWidths = computed(() => { + const actionsColumn = this._actionsColumnWidth(); + const widths = [actionsColumn]; + this.propList.forEach(({ value: prop }) => { + widths.push(prop.columnWidth); + }); + return widths; + }); + constructor() { const extensions = this.#injector.get(ExtensionsService); const name = this.#injector.get(EXTENSIONS_IDENTIFIER); @@ -136,15 +149,6 @@ export class ExtensibleTableComponent implements OnChanges, AfterViewIn this.permissionService.filterItemsByPolicy( this.actionList.toArray().map(action => ({ requiredPolicy: action.permission })), ).length > 0; - this.setColumnWidths(DEFAULT_ACTIONS_COLUMN_WIDTH); - } - - private setColumnWidths(actionsColumn: number | undefined) { - const widths = [actionsColumn]; - this.propList.forEach(({ value: prop }) => { - widths.push(prop.columnWidth); - }); - (this.columnWidths as any) = widths; } private getIcon(value: boolean) { @@ -213,10 +217,6 @@ export class ExtensibleTableComponent implements OnChanges, AfterViewIn return record; }); - if ((this.columnWidths as any)?.some?.((w: number | undefined) => w == null)) { - this.setColumnWidths(this.columnWidths?.[0] as any); - this.cdr.markForCheck(); - } } isVisibleActions(rowData: any): boolean {