Угловой мат-стол с дополнительным рядом перед каждой группой

Question

Я хочу создать лайтаут, похожий на этот, с Angular Material

Я не знаю, как добавить дополнительную строку заголовка (синий)) перед каждой группой строк.

Это то, что я имею до сих пор.

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

<ng-container matColumnDef="env">
  <th mat-header-cell *matHeaderCellDef> Env </th>
  <td mat-cell *matCellDef="let element"> {{element.options.env}} </td>
</ng-container>

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

Мои данные имеют макет:

{ [{options: {env: abc}, sublist: {[host1, host2, hostn]}}, ..]}

Answer 1

Это способ сделать это (действительно нужно еще 4 символа, чтобы опубликовать это?) https://stackblitz.com/edit/angular-mattable-with-groupheader?file=package.json