How to get updated sorted items in ngx-datatable after sorting

237 Views Asked by At

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];
    }
1

There are 1 best solutions below

1
nandhakumar On
<ngx-datatable .... #table>
</ngx-datatable>
@ViewChild(DatatableComponent) table: DatatableComponent;
public getGridData() {
    console.log(this.table._internalRows)
}

I hope this helps you.