如何在angular mat-table中按行分组

export interface Person {
  name: string;
  department: string;
}

const people: Person[] = [
  { name: 'Alice', department: 'HR' },
  { name: 'Bob', department: 'Engineering' },
  { name: 'Charlie', department: 'HR' },
  // ...更多人员
];

function groupByDepartment(people: Person[]): { [key: string]: Person[] } {
  return people.reduce((groups, person) => {
    const department = person.department;
    if (!groups[department]) {
      groups[department] = [];
    }
    groups[department].push(person);
    return groups;
  }, {});
}

<table mat-table [dataSource]="groupedData">
  <!-- 部门列 -->
  <ng-container matColumnDef="department">
    <th mat-header-cell *matHeaderCellDef> Department </th>
    <td mat-cell *matCellDef="let group" colspan="2">
      {{ group.key }}
      <button (click)="toggleGroup(group.key)">
        {{ isGroupExpanded(group.key) ? 'Collapse' : 'Expand' }}
      </button>
    </td>
  </ng-container>

  <!-- 姓名列 -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let person" *ngIf="isGroupExpanded(person.department)">
      {{ person.name }}
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="['department']"></tr>
  <tr mat-row *matRowDef="let row; columns: ['name']; when: isGroupVisible"></tr>
</table>

export class TableComponent {
  people = people;
  groupedData: { key: string, value: Person[] }[] = [];
  expandedGroups: Set<string> = new Set();

  constructor() {
    this.groupedData = Object.entries(groupByDepartment(this.people)).map(([key, value]) => ({ key, value }));
  }

  toggleGroup(department: string) {
    if (this.expandedGroups.has(department)) {
      this.expandedGroups.delete(department);
    } else {
      this.expandedGroups.add(department);
    }
  }

  isGroupExpanded(department: string): boolean {
    return this.expandedGroups.has(department);
  }

  isGroupVisible(row: Person): boolean {
    return this.isGroupExpanded(row.department);
  }
}