From 0f23ce685acbb798abd4d4a4409ab0a4a8b7d88f Mon Sep 17 00:00:00 2001
From: Fahri Gedik <fahrican9978@gmail.com>
Date: Tue, 2 Sep 2025 10:10:04 +0300
Subject: [PATCH] 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<R = any> 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<any>;
@@ -117,14 +120,24 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
 
   hasAtLeastOnePermittedAction: boolean;
 
-  readonly columnWidths!: number[];
-
   readonly propList: EntityPropList<R>;
 
   readonly actionList: EntityActionList<R>;
 
   readonly trackByFn: TrackByFunction<EntityProp<R>> = (_, item) => item.name;
 
+  // Signal for actions column width
+  private readonly _actionsColumnWidth = signal<number | undefined>(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<R = any> 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<R = any> 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 {