使用 Angular material table 对列进行分组

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 issue 的解决方案。

请参阅此 Stackblitz 以获取完整的工作示例。

使用 Angular material table 对列进行分组

Use Angular material table to group columns

angular-material

angular

mat-table