使用 Angular 材质表对列进行分组

Question

我试图弄清楚如何使用 Angular mat-table 对列进行分组。我不知道如何开始，我似乎无法在任何地方找到一个例子。前两个部分需要像下图这样分组：

Answer 1

您可以添加<tr>列组并用于[attr.colspan]指定要包含的列数。下面的示例有 4 列。

    <!-- Header row first group -->
  <ng-container matColumnDef="header-row-first-group">
    <th mat-header-cell *matHeaderCellDef 
        [style.text-align]="center"
        [attr.colspan]="1"> 
      First group 
    </th>
  </ng-container>

  <!-- Header row second group -->
  <ng-container matColumnDef="header-row-second-group">
    <th mat-header-cell *matHeaderCellDef [attr.colspan]="3"> Second group </th>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="['header-row-first-group', 'header-row-second-group']"></tr>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

我在这个Github 问题的线程中找到了解决方案。

有关完整的工作示例，请参阅此Stackblitz。