1

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>

Also even if we the custom sorting on table level I am not sure how to sort between 3 values

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>
C.Das
  • 87
  • 2
  • 12
  • IS this a different question? https://stackoverflow.com/questions/72695900/angular-primeng-p-table-add-custom-sorting-function-to-specific-column – Charlie V Jun 27 '22 at 08:01

0 Answers0