PrimeNg Datatable Custom Sorting repeating itself

Question

I have a datatable in Angular 2 app where I want to custom sort a column.

<p-column field="eligible" header="Eligible" sortable="custom" (sortFunction)="sortColumn($event)"></p-column>

In my component file, I'm making an API call to get the sorted results from the backend based on some logic.

sortColumn(colName: any) {
  let columnName = undefined !== colName.field ? colName.field : colName;
  let sortObject: any = {};
  if (this.sortedColumn === columnName) {
   if (!this.sortAsc) {
     this.sortAsc = true;
     sortObject[columnName] = 'DESC';
   } else {
    this.sortAsc = false;
    sortObject[columnName] = 'ASC';
 }
 } else {
  this.sortedColumn = columnName;
  this.sortAsc = false;
  sortObject[columnName] = 'ASC';
 }
this.getData(sortObject);
}

This API in return gets the whole data back and reorders the view. Now what's happening here is that this method sortColumn() keeps getting called repeatedly.

Can anyone please help me understand what might be causing this issue and how to resolve it?

Adolphadolphe

Answer 1

You can to try event onSort of datatable

<p-dataTable [value]="data" (onSort)="sortColumn($event)>
  <p-column field="vin" header="Vin" ></p-column>

  <p-column field="eligible"  header="Eligible" [sortable]="true"></p-column>    

  <p-column field="year" header="Year"></p-column>
  <p-column field="color" header="Color" ></p-column>
</p-dataTable>

this event has event.field: Field name of the sorted column and and event.order (1 o -1) event.order. This event is invoked only when click in sort column.

I hope that it help you.

Tint

onSort($event) is not calling my method sortColumn() inside the component. – Adolphadolphe

I had the same problem, setting the table to lazy solved it: github.com/primefaces/primeng/issues/5163 – Mcbroom

I do not get the sort icon using this code on my column – Monopetalous

[lazy]="true" did the job. – Klausenburg

Answer 2

I got repetitive http calling problem for using both onSort and sortFunction in p-table in Prime ng. Problem was solved using [lazy]="true", (onLazyLoad)="customSort($event)" in p-table tag in angular8.

HTML:

<p-table [loading]="isLoading"
         [value]="listProjectClone"
         [scrollable]="true"
         sortMode="single"
         styleClass="custom-table borderless" [lazy]="true" 
         (onLazyLoad)="customSort($event)">

TS File Code:

import { LazyLoadEvent } from 'primeng/api';

customSort(event: LazyLoadEvent) {   
    this.sortBy = event.sortField;
    this.sortOrderBy = event.sortOrder == 1 ? 'ASC' : 'DESC';
    //http call to server
   }

Staircase

Answer 3

This will also work:

HTML:

<p-table [value]="itemCategoryData" dataKey="itemCategoryId"
  (onSort)="customSort($event)" [lazy]="true" [customSort]="true"
>
  // your row header and rows
</p-table>

TS:

customSort(event: any) {
  this.pagerConfig.orderBy = `${event.field} ${event.order  === 1 ? 'asc' : 'desc'}`;
  this.fetchData();
}

Pruritus