How to sort data in a PrimeNG DataTable with Row Grouping

Question

What I want to do is to sort the data already grouped in alphabetical order or custom order. I used the sortField attribute which specify the groupheader order but I need to order the data inside the group too.

Answer 1

I have the same issues. I have added customized sort to solve this issues

To add a customized sort

<p-column   field="color" header="color"  sortable="custom" (sortFunction)="sortByColor($event)"></p-column>

In the typescript create a customSort

sortByColor(e) {
    this.cars.sort(function (a, b) {
      let aGroup = a.name.toLowerCase();
      let bGroup = b.name.toLowerCase();
      if (aGroup > bGroup) return 1;
      if (aGroup < bGroup) return -1;
      let aSort = a.color.toLowerCase();
      let bSort = b.color.toLowerCase();
      if (aSort > bSort) return 1;
      if (aSort < bSort) return -1;
      return 0
    });
  }

Answer 2

For those who have the problem with TurboTable <p-table>, here is the solution:

<p-table sortField="name" sortMode="single" (onSort)="onSort($event)" (sortFunction)="customSort($event)" [customSort]="true">

OnSort() implementation:

onSort() {
   // function to properly work with turbotable and rowgroup, see: https://www.primefaces.org/primeng/#/table/rowgroup 
   this.updateRowGroupMetaData();
}

customSort() implementation:

customSort(e) {
  this.budgets.sort((a, b) => {
    const aGroup = a.name.toLowerCase();
    const bGroup = b.name.toLowerCase();
    if (aGroup > bGroup) { return 1; }
    if (aGroup < bGroup) { return -1; }
    const aSort = a.color;
    const bSort = b.color;
    if (aSort > bSort) { return 1; }
    if (aSort < bSort) { return -1; }
    return 0;
  });
}