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>

score 2 · Answer 1 · answered Jun 21 '22 at 08:24

There are two ways you can do it.

PrimeNg way: Use this code on table itself.

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

TypeScript customSort(event: SortEvent) {}

event in customSort contains field property by which you can apply your custom sorting. Issue with this approach is you have to handle sorting for all sortable fields.
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

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

1 Answers1

Linked