Angular материал - таблица с таблицами заголовков (поддержка сортировки в будущем) - как это реализовать?

Question

Я пытаюсь составить список материалов, чтобы он выглядел примерно как класс c excel с фильтрами сверху. Сейчас я немного застрял, потому что мне не хватало идей. Код теперь генерирует только заголовки, вопрос о том, как укоротить в коде (особенно в html) элементы списка в той же сетке, что и заголовок. На данный момент код выглядит так:

<div *ngIf="viewList" class="content" fxFlex>
    <mat-list>
      <mat-list-item>
        <mat-grid-list cols="14" rowHeight="100px" fxFlex>
          <div *ngFor="let element of headersList">
            <mat-grid-tile [colspan]="element.width" class="title-tile">
              <div fxLayout="column" fxLayoutAlign="space-between center" >
                <span>
                  {{element.label}}
                </span>      
              </div>
            </mat-grid-tile>
          </div>
        </mat-grid-list>
      </mat-list-item>
      <mat-list-item *ngFor="let element of fileElements" (click)="navigate(element)">
        <mat-grid-list cols="14" rwoHeight="100px" fxFlex>
          <div *ngFor="let styleElement of headersList">
            <mat-grid-tile [colspan]="styleElement.width">
              <div fxLayout="column" fxLayoutAlign="space-between center">
                <span>
                  {{element.{{styleElement.label}}}} <---this is bad idea - i know
                </span>
              </div>
            </mat-grid-tile>
          </div>
        </mat-grid-list>
      </mat-list-item>
    </mat-list>
  </div>