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?

4
  • And what is your specific question? Commented Jun 24, 2022 at 7:16
  • What logic should I use for the sorting instead of using the ascending, descending order Commented Jun 24, 2022 at 8:37
  • Sorting is always comparing one (group of) item(s) to another. See: 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. Commented Jun 24, 2022 at 8:53
  • Is this a different question from stackoverflow.com/questions/72695900/… and stackoverflow.com/questions/72702886/… Commented Jun 27, 2022 at 8:02

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.