Angular material table multiple header rows mapping

You should transform data by combining multiple rows into a single row by artist.

The transformed data should be looked as below:

[
    {
        "artistName": "Q1",
        "percentage_0": "10%",
        "value_0": "$200",
        "percentage_1": "15%",
        "value_1": "$250"
    },
    ...,
    {
        "artistName": "SUM",
        "percentage_0": "25%",
        "value_0": "$550",
        "percentage_1": "25%",
        "value_1": "$650"
    }
]

displayedColumns: string[] = ['artistName'];

firstHeaderColumns = ['_'];

transformDataSource: any[] = [];

ngOnInit() {
  let songs = this.data.summary.map((x) => x.songName);
  this.firstHeaderColumns = this.firstHeaderColumns.concat(songs);
  this.displayedColumns = this.displayedColumns.concat(
    ...songs.map((x: string, i: number) => [`percentage_${i}`, `value_${i}`])
  );

  this.transformDataSource= this.data.data.map((x: any) => {
    let obj: any = { artistName: x.artistName };

    for (let i = 0; i < songs.length; i++) {
      obj[`percentage_${i}`] = x.songs[i].percentage;
      obj[`value_${i}`] = x.songs[i].value;
    }

    return obj;
  });

  let summary: any = { artistName: 'SUM' };
  this.data.summary.forEach((x: any, i: number) => {
    summary[`percentage_${i}`] = x.totalPercentage;
    summary[`value_${i}`] = x.totalValue;
  });
  this.transformDataSource.push(summary);
}

<table mat-table [dataSource]="transformDataSource" class="mat-elevation-z8">
  <ng-container *ngFor="let column of displayedColumns">
    <ng-container matColumnDef="{{column}}">
      <th mat-header-cell *matHeaderCellDef>
        <ng-container
          [ngTemplateOutlet]="headerTemplate"
          [ngTemplateOutletContext]="{ $implicit: column }"
        >
        </ng-container>
      </th>
      <td mat-cell *matCellDef="let element">{{element[column]}}</td>
    </ng-container>
  </ng-container>

  <ng-container *ngFor="let headerColumn of firstHeaderColumns">
    <ng-container matColumnDef="{{headerColumn}}">
      <th
        mat-header-cell
        *matHeaderCellDef
        [attr.colspan]="headerColumn != '_' ? 2 : 1"
        [style.text-align]="'center'"
      >
        {{headerColumn != '_' ? headerColumn : '' }}
      </th>
    </ng-container>
  </ng-container>

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

<ng-template let-prop #headerTemplate>
  <ng-container [ngSwitch]="prop.split('_')[0]" [style.text-align]="'center'">
    <ng-container *ngSwitchCase="'artistName'">Artist</ng-container>
    <ng-container *ngSwitchCase="'percentage'">Perc %</ng-container>
    <ng-container *ngSwitchCase="'value'">Value %</ng-container>
  </ng-container>
</ng-template>

Demo @ StackBlitz