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

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.