primeng，p表列“重新排序”不起作用

Question

i am using Primeng table , and trying to use column "reorder" feature, without success.

When i am moving a column, the "arrow" image is shown, but when i am dropping the column in other location - nothing happen(the column is still in the "previous location").

<div class="container">
  <p-table #dt [value]="pagedTasks"
           [paginator]="true"
           [rows]="pageSize"
           [first]="first"
           [lazy]="true"
           [totalRecords]="totalRecords"
           [autoLayout]="true"
           (onLazyLoad)="loadTasksLazy($event)"
           [responsive]="true"
           sortField="id"
           sortOrder="-1"
           [reorderableColumns]="true"
           >
   <ng-template pTemplate="caption">
    ...
   /ng-template>
   <ng-template pTemplate="header">
     <tr>
        <th *ngFor="let col of cols" [pSortableColumn]="col.field" pReorderableColumn>
          <div *ngIf="col.field !== 'actions'">
            {{ col.header }}
            <p-sortIcon [field]="col.field"></p-sortIcon>
          </div>
          <div *ngIf="col.field === 'actions'">
            <fa name="file-code"></fa>
          </div>
        </th>
      </tr>
   ...
  </p-table>
</div>

As you can see, i am using [reorderableColumns]="true" in p-table element, and pReorderableColumn on th element. Am I missing something?

Answer 1

I kept comparing my table to the example in Primeng site, and found that i didn't bind the cols array to the columns property [columns]="cols" in the p-table element.

<p-table
...
[columns]="cols"
>

Answer 2

Had a similar issue today, since i want to save the order and the selection of the columns, i used <p-table [columns]="selectedColumns" (onColReorder)="saveReorderedColumns($event)" ...>

Problem was that in my function i did not set the selectedColumns again. Solution was doing the following:

saveReorderedColumns(event: any) {
  this.selectedColumns = this.clone(event.columns); // <-- important
  localStorage.setItem(this.dataKeyForStorage, JSON.stringify(event.columns));
}

after that it was working fine for me. Hope it helps someone :-)