0

I am using PrimeNG's p-table. in that the default sorting functionality is in ascending and descending order, like this

suppose we have a data on a column like this -

aaa
bbb
aaa
ccc
bbb
ccc

when we will apply sorting in ascending order it is showing like this -

aaa
aaa
bbb
bbb
ccc
ccc

and when we will apply sorting in descending order it is showing like this -

ccc
ccc
bbb
bbb
aaa
aaa

but here I want a different sorting functionality like if we are sorting in ascending order it should come like this -

aaa
aaa
ccc
ccc
bbb
bbb

here the ccc should come in middle and bbb should come at last

and when we will apply sorting in descending order it should come like this -

bbb
bbb
ccc
ccc
aaa
aaa

here the bbb should come at first and ccc should come in middle

here is my html -

<p-table #orderTable [value]="orderData"
       [rowHover]="true"
       [rows]="5"
       [scrollable]="true"
       [filterDelay]="0"
       [globalFilterFields]="['status']"
       class="borderless"
       (sortFunction)="customSort($event)" 
       [customSort]="true">

<ng-template pTemplate="colgroup" let-columns>
  <colgroup>
    <col [style.min-width]="'100px'" [style.width]="'100px'">
  </colgroup>
</ng-template>

<ng-template pTemplate="header">
  <tr>
    <th pSortableColumn="status">Status<p-sortIcon field="status"></p-sortIcon></th>
  </tr>
</ng-template>
<ng-template pTemplate="body" let-order>
  <tr>
    <td>
      <div class="hide-overflow-text">
        <button class=pill>{{order.status}}</button>
      </div>
    </td>
  </tr>
</ng-template>

here is the custom sorting function -

customSort(event: SortEvent) {
 event.data.sort((data1, data2) => {
  let value1 = data1[event.field];
  let value2 = data2[event.field];
  let result = null;

  if (value1 == null && value2 != null)
    result = -1;
  else if (value1 != null && value2 == null)
    result = 1;
  else if (value1 == null && value2 == null)
    result = 0;
  else if (typeof value1 === 'string' && typeof value2 === 'string') {
    result = value1.localeCompare(value2);
  }
  else
    result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;

  return (event.order * result);
});

}

Any idea what logic should I use for the custom sorting instead of using the ascending, descending order?

C.Das
  • 87
  • 2
  • 12
  • And what is your specific question? – Charlie V Jun 24 '22 at 07:16
  • What logic should I use for the sorting instead of using the ascending, descending order – C.Das Jun 24 '22 at 08:37
  • Sorting is always comparing one (group of) item(s) to another. See: https://dictionary.cambridge.org/dictionary/english/sorting If you want to order in a different way you might want to look into adding additional info into your array that can be sorted. – Charlie V Jun 24 '22 at 08:53
  • Is this a different question from https://stackoverflow.com/questions/72695900/angular-primeng-p-table-add-custom-sorting-function-to-specific-column and https://stackoverflow.com/questions/72702886/angular-primeng-p-table-add-custom-sorting-function-with-multiple-values-to-a-s – Charlie V Jun 27 '22 at 08:02

0 Answers0