I am using swimlane/ngx-datatable library for to displaying the list. In the list of each row I am adding action menu (When icon click the menu will display as popup) with items dynamically.
Issue: After sorting items gets sorted in the form , but when I click the action menus it shows wrong items.
RCA: The action menus items of each row is always generating based on initial table items not the updated sorted items.
So kindly help me for how to get the updated table object in ngx-datatable after sorting.
<ngx-datatable #table class="table-element elevation-1 bootstrap" [cssClasses]="tableConfig.cssClasses"
[rows]="tempDocumentCollection" [columns]="columns" [rowClass]="getRowClass" [reorderable]="true"
[headerHeight]="tableConfig.headerHeight" [footerHeight]="tableConfig.footerHeight"
[rowHeight]="tableConfig.rowHeightSmall" selectionType="checkbox" (select)='onSelect($event)'
[scrollbarV]="true" [scrollbarH]="true" columnMode="flex" style="width:100%" ngxColumnMode>
<ngx-datatable-footer>
<ng-template ngx-datatable-footer-template let-rowCount="rowCount" let-pageSize="pageSize"
let-selectedCount="selectedCount" let-curPage="curPage" let-offset="offset">
<div class="container-fluid d-flex align-items-center">
<span class="total">{{'DEFAULT.TOTAL' | translate }} {{ rowCount.toLocaleString() }}</span>
<si-pagination [currentPage]="curPage" [totalRowCount]="rowCount" [pageSize]="pageSize"
(currentPageChange)="table.onFooterPage({ page: $event })" class="ms-auto">
</si-pagination>
</div>
</ng-template>
</ngx-datatable-footer>
I am tried with the below code in sort event but 'tempDocumentCollection' always showing the same data not the sorted data.
onSort(row: any) {
this.tempDocumentCollection = [...this.tempDocumentCollection];
const data = this.tempDocumentCollection;
this.tempDocumentCollection = [];
this.changeDetectorRef.detectChanges();
this.tempDocumentCollection = [...data];
}
I hope this helps you.