Use Angular material table to group columns

Question

I have am trying to figure out how to group columns using Angular mat-table. I have no clue how to start with this and I can't seem to find an example anywhere. The first two sections need to be grouped like this image below:

Answer 1

You can add a <tr> with your column groups and use [attr.colspan] to specify how many columns to include. The example below has 4 columns.

    <!-- 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>

I found the solution in the thread for this Github issue.

See this Stackblitz for a complete working example.