Angular PrimeNG p-table如何为指定列添加自定义排序函数

实现思路 #

PrimeNG p-table支持自定义排序能力，不需要修改其他列的默认排序逻辑，仅通过判断当前触发排序的列字段，对Status列单独应用优先级权重排序规则即可。

具体实现步骤 #

1. 组件TS层编写排序逻辑 #

首先定义Status三个值的优先级权重，再编写统一的排序回调函数：

import { Table } from 'primeng/table';
import { Component } from '@angular/core';

@Component({
  // 你的组件原有配置保持不变
})
export class YourComponent {
  // 原有的orderData等业务变量保持不变

  // 定义状态优先级权重，数值越大优先级越高
  private readonly statusWeight: Record<string, number> = {
    High: 3,
    Medium: 2,
    Low: 1
  };

  /**
   * 表格排序回调
   * @param event 排序事件参数，包含排序字段、排序方向、当前表格数据
   * @param table p-table实例
   */
  onTableSort(event: any, table: Table) {
    // 仅对status列应用自定义排序
    if (event.field === 'status') {
      event.data.sort((rowA, rowB) => {
        const weightA = this.statusWeight[rowA.status] ?? 0;
        const weightB = this.statusWeight[rowB.status] ?? 0;
        // 乘以event.order（1为升序，-1为降序）自动适配排序方向
        return (weightA - weightB) * event.order;
      });
    } else {
      // 其余列调用PrimeNG原生默认排序逻辑，不改变原有排序行为
      table.sortSingle(event);
    }
    // 同步表格总条数缓存，避免分页显示异常
    table.totalRecords = event.data.length;
  }
}

2. 修改模板配置 #

只需要给p-table根标签添加自定义排序开关和排序事件绑定，其余代码（包括另外两列的排序配置、Status列的表头配置）完全不需要改动：

<!-- 仅修改p-table根标签，添加customSort和sort两个属性 -->
<p-table #orderTable [value]="orderData"
           [rowHover]="true"
           [rows]="5"
           [scrollable]="true"
           [filterDelay]="0"
           [globalFilterFields]="['notification','action']"
           [customSort]="true"
           (sort)="onTableSort($event, orderTable)"
           class="borderless">

    <!--  colgroup、header、body模板里的内容全部保持原样，不需要修改  -->
    <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>
        <!-- Status列原有写法完全保留 -->
        <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>

效果说明 #

• 点击Status列升序排序时，行顺序为 Low → Medium → High
• 点击Status列降序排序时，行顺序为 High → Medium → Low
• Notification、Action两列的排序逻辑和之前完全一致，不受自定义逻辑影响
• 若存在未在权重映射中定义的异常状态值，默认权重为0，会排到排序结果的最末端，不会触发脚本报错
• 如果你的表格开启了多列排序模式，只需要把回调里的table.sortSingle(event)替换为table.multiSort(event)即可兼容

内容的提问来源于stack exchange，提问作者C.Das