PrimeNg Datatable Custom Sorting repeating itself

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.


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
   }