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>

What if. Lazy Loading is set to true ?

Harsh Patel
– Harsh Patel

2025-04-22 10:39:12 +00:00
Commented Apr 22 at 10:39 — Harsh Patel
– Harsh Patel, Commented Apr 22 at 10:39

Gourav Garg · Accepted Answer · 2024-10-23 09:50:48Z

5

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.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.

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

edited Oct 23, 2024 at 9:50

answered Jun 21, 2022 at 8:24

Gourav Garg

2,92114 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Winnemucca Over a year ago

that page is a 404. worth updating answer with current documentation.

Gourav Garg Over a year ago

Updated link and added custom sort function

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related