Column widths are not recalculated correctly on drag&drop for Scrollable tables with Columns Resize enabled (continuation of issue 11372)

[majkers]

Describe the bug

If user resizes column and drag/drops column to change the order then columns will not exchange the widths. The width of new position will be used for dropped column.

Reason of the issue: the table uses next styles for resize of flex tables that are not recalculated on column reordering

#pr_id_1 .p-datatable-thead > tr > th:nth-child(1),
#pr_id_1 .p-datatable-tbody > tr > td:nth-child(1),
#pr_id_1 .p-datatable-tfoot > tr > td:nth-child(1) {
    flex: 1 1 155px !important;
}

All details are in https://github.com/primefaces/primeng/issues/11372 and the issue still persists in PrimeNg 15.2.0

Environment

Angular: 15.2.1 PrimeNG: 15.2.0

Reproducer

https://stackblitz.com/edit/primeng-dropdown-demo-uf4ypj?file=src/app/app.module.ts

Angular version

15.2.1

PrimeNG version

15.2.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

14.17.3

Browser(s)

All

Steps to reproduce the behavior

• Open https://stackblitz.com/edit/primeng-dropdown-demo-uf4ypj?file=src/app/app.module.ts
• Expand third column, make it quite big
• Drag and drop third column to first position
• First and Second columns will be shifted to the right (expected) but widths are unexpected (1st col width = old 1st col width, 2nd col width = old 2nd col width and etc). So now old 2nd column will be the largest one

Expected behavior

Column widths are moved together with columns

[leliaflorina]

Did anyone found a solution for this?

[puranjayjain]

same

[MatthiasRossbach]

I was able to narrow down the problem to here

if (this.resizableColumns && this.resizeColumnElement) {
      let width = this.columnResizeMode === 'expand' ? this._initialColWidths : this._totalTableWidth();
      ObjectUtils.reorderArray(width, dragIndex + 1, dropIndex + 1);
      this.updateStyleElement(width, dragIndex, null, null);
  }

https://github.com/primefaces/primeng/blob/f3cec7d743aab7558975ddbd4d04acca35594087/src/app/components/table/table.ts#L6205

@cetincakiroglu : I don't understand the intend behind the ternary operator. Is this maybe a copy paste error? Why not always use this._totalTableWidth().

This._initialColWidth is misleading if order in table is changed.

[MatthiasRossbach]

Error can be reproduced in table with

• columnResizeMode="expand"
• [resizableColumns]="true"
• [reorderableColumns]="true"

How to reduce:

1. Resizes element
2. Reorder resized element (<= Works exactly one time)
3. Move next element before reodered/resized element