In Primeng Table how to get the reordered rows/list after reordering the rows?

<p-table [value]="playlistTracks" [rows]="10" [showCurrentPageReport]="true" [rowsPerPageOptions]="[10,25,50]"
[totalRecords]="playlistTracks.length" [paginator]="true"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
[tableStyle]="{'min-width': '60rem'}" (onRowReorder)="tableReordered($event)" (onSort)="tableSorted($event)">
<ng-template pTemplate="caption">



tableReordered(event: any) {
this.reOrderedTracks = [];
this.showDetailedGraph = false;
this.showSummaryGraph = false;

console.log('dragIndex :',event.dragIndex,'dropIndex :',event.dropIndex);

// Remove the item from the drag index and insert it at the drop index
const movedItem = this.playlistTracks.splice(event.dragIndex, 1)[0]; // Remove the item at dragIndex
this.playlistTracks.splice(event.dropIndex, 0, movedItem); // Insert the moved item at dropIndex

console.log('reordered :',this.playlistTracks)
}


but this way, the reordering of rows in table is being affected. For example, when i place item from 0 index to 1 it does not reorder, then if I remove:

const movedItem = this.playlistTracks.splice(event.dragIndex, 1)[0]; // Remove the item at dragIndex
this.playlistTracks.splice(event.dropIndex, 0, movedItem); // Insert the moved item at dropIndex


from the method the reordering works fine.

Continue reading...