From 53cfc6a81779c7e30b7bbfd1425940180dfa74a8 Mon Sep 17 00:00:00 2001
From: Fahri Gedik <fahrican9978@gmail.com>
Date: Mon, 1 Sep 2025 17:01:41 +0300
Subject: [PATCH] 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)) {
     <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"
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 4aad4a3c4f..3044859875 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
@@ -212,6 +212,11 @@ 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 {