Reapply "Improve column width handling in ExtensibleTable"

This reverts commit 3f41906037.

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

@@ -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 {