Angular PrimeNG p-table: add custom sorting function to specific column

Question

I am using PrimeNG's p-table. The table currently has default sorting on two column but the third column data is like it should sort by Status (High, Medium, Low). Now I need to implement sorting on this column but that has to be a custom-logic based sorting.

I know that p-table provides this feature on table level but I am not sure at column level as shown below:

<th pSortableColumn="status">Status<p-sortIcon field="status"></p-sortIcon></th>

My HTML structure -

<p-table #orderTable [value]="orderData"
           [rowHover]="true"
           [rows]="5"
           [scrollable]="true"
           [filterDelay]="0"
           [globalFilterFields]="['notification','action']"
           class="borderless">

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

    <ng-template pTemplate="header">
      <tr>
        <th pSortableColumn="notification">Notification <p-sortIcon field="notification"></p-sortIcon></th>
        <th pSortableColumn="action">Action <p-sortIcon field="action"></p-sortIcon></th>
        <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">
            {{order.notification}}
          </div>
        </td>
        <td>
          <div class="hide-overflow-text">
            {{order.action}}
          </div>
        </td>
        <td>
          <div class="hide-overflow-text">
            <button class=pill>{{order.status}}</button>
          </div>
        </td>
      </tr>
    </ng-template>
  </p-table>

Answer 1

There are two ways you can do it.

1. PrimeNg way: Use this code on table itself.

   HTML (sortFunction)="customSort($event)" [customSort]="true"

   TypeScript

customSort(event: SortEvent) {
  //event.data = Data to sort
  //event.mode = 'single' or 'multiple' sort mode
  //event.field = Sort field in single sort
  //event.order = Sort order in single sort
  //event.multiSortMeta = SortMeta array in multiple sort

  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);
  });
}

Issue with this approach is you have to handle sorting for all sortable fields.

2. Extra Property Way: Create an extra property in your object like statusValue. {1: 'High', 2: 'Medium', 3: 'Low'} and apply sorting on this column rather than original status column.

You can find more info related to customSort here