Merge pull request #23860 from abpframework/issue-7396

Fix column width handling in extensible table

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

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

@@ -130,12 +130,7 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
   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;
+    return this.propList.toArray().map(prop => prop.columnWidth);
   });
 
   constructor() {