如何对Angular的mat-table排序以将收藏项固定展示在顶部

实现思路 #

• 优先基于行数据的收藏标识做第一层排序，收藏项的排序权重永远高于非收藏项
• 同属收藏/非收藏分组的内容，再按照当前用户选中的排序字段、排序方向执行常规排序

具体实现步骤 #

1. 定义数据结构与基础变量 #

首先确保你的行数据结构包含收藏状态标识字段，示例如下：

import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';
import { ViewChild, AfterViewInit } from '@angular/core';

// 自定义表格行数据类型，根据实际业务调整
interface TableItem {
  id: number;
  name: string;
  // 收藏标识字段，可根据你的业务修改字段名
  isFavorited: boolean;
  // 其余业务字段...
}

// 组件类中定义基础变量
export class YourComponent implements AfterViewInit {
  @ViewChild(MatSort) sort: MatSort;
  dataSource = new MatTableDataSource<TableItem>([]);
  displayedColumns: string[] = ['id', 'name'];
  // ...其余组件逻辑
}

2. 重写自定义排序逻辑 #

覆盖MatTable默认的排序方法，加入收藏项置顶的判断：

ngAfterViewInit() {
  this.dataSource.sort = this.sort;

  // 自定义排序规则
  this.dataSource.sortData = (data: TableItem[], sort: MatSort) => {
    // 未设置排序规则时直接返回原数据
    if (!sort.active || sort.direction === '') {
      return data;
    }

    return data.sort((a, b) => {
      // 第一层排序：收藏项永远置顶
      const isAFavorited = a.isFavorited;
      const isBFavorited = b.isFavorited;
      if (isAFavorited && !isBFavorited) return -1;
      if (!isAFavorited && isBFavorited) return 1;

      // 第二层排序：同分组内按照当前选中的排序规则执行
      const isAsc = sort.direction === 'asc';
      switch (sort.active) {
        // case值对应模板中mat-sort-header绑定的字段名，按需扩展
        case 'id': return compare(a.id, b.id, isAsc);
        case 'name': return compare(a.name, b.name, isAsc);
        default: return 0;
      }
    });
  }
}

// 通用比较工具函数
function compare(a: number | string, b: number | string, isAsc: boolean) {
  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

3. 模板代码适配 #

模板部分无需特殊修改，正常使用MatSort和mat-sort-header即可：

<table mat-table [dataSource]="dataSource" matSort>
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef mat-sort-header="id"> ID </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header="name"> 名称 </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

注意事项 #

• 若你的业务中收藏字段名不是isFavorited，只需修改排序逻辑中对应的字段即可
• 执行新增/取消收藏操作后，需要手动触发表格排序更新：执行this.dataSource.sort = this.sort即可刷新顺序
• 该方案完全基于Angular Material原生能力扩展，不依赖任何第三方依赖，不管用户切换任何排序字段、升降序规则，收藏项都会固定在表格最顶部

内容的提问来源于stack exchange，提问作者Janos Vinceller