Improve column width handling in ExtensibleTable

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html

@@ -40,8 +40,9 @@
   @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) {
     <ngx-datatable-column
       [name]="actionsText | abpLocalization"
-      [maxWidth]="columnWidths[0]"
-      [width]="columnWidths[0]"
+      [maxWidth]="columnWidths[0] ?? undefined"
+      [width]="columnWidths[0] ?? 200"
+      [canAutoResize]="!columnWidths[0]"
       [sortable]="false"
     >
       <ng-template let-row="row" let-i="rowIndex" ngx-datatable-cell-template>
@@ -59,7 +60,8 @@
   @for (prop of propList; track prop.name; let i = $index) {
     <ngx-datatable-column
       *abpVisible="prop.columnVisible(getInjected)"
-      [width]="columnWidths[i + 1] || 200"
+      [width]="columnWidths[i + 1] ?? 200"
+      [canAutoResize]="!columnWidths[i + 1]"
       [name]="(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization"
       [prop]="prop.name"
       [sortable]="prop.sortable"

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts

@@ -3,16 +3,19 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  computed,
   EventEmitter,
   inject,
   Injector,
   Input,
   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) {
@@ -212,6 +216,7 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
 
       return record;
     });
+
   }
 
   isVisibleActions(rowData: any): boolean {