How can I create an Angular Material Design table with infinite columns, for known number of rows?

Question

I have created an HTML table which will generate infinite columns based on the number of rows in the input data. I've tried to use this SO post as an example, but I'm struggling to convert my HTML to Angular Material design. Any suggestions?

StackBlitz demo

Since Angular material tables are column-based (and I couldn't find a way to iterate over the rows within them) I got stuck pretty quickly.

I couldn't get angular material tables working in the StackBlitz, so here is a copy paste of my code:

<table mat-table [dataSource]="newLicenseDS">

    <ng-container *ngFor="let disCol of newLicCol; let idx = index" matColumnDef="{{disCol}}">
        <th mat-header-cell *matHeaderCellDef>{{disCol}}</th>
        <ng-container *ngIf="idx==0">
           <td mat-cell *matCellDef="let e">{{e[0]|json}}</td>
        </ng-container>
        <ng-container *ngIf="idx==1">
           <td mat-cell *matCellDef="let e">{{e[1]|json}}</td>
        </ng-container>
        <ng-container *ngIf="idx==2">
           <td mat-cell *matCellDef="let e[2]">{{e|json}}</td>
        </ng-container>
    </ng-container>

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

Answer 1

the only thing you need is "loop" the matColumnDef. -see that we use [matColumnDef] and {{element[col]}}

If your table is like

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

  <ng-container *ngFor="let col of displayedColumns" [matColumnDef]="col">
    <th mat-header-cell *matHeaderCellDef>{{col}}</th>
    <td mat-cell *matCellDef="let element"> {{element[col]}} </td>
  </ng-container>

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

You only need transform your data and indicate the displayedColumns. You can do in a ngOnInit()

ngOnInit() {
    const head = this.data.map(x => x.name)
    const data: any[] = [];
    this.data.forEach((x, index) => {
      Object.keys(x).forEach((k, index2) => {
        data[index2] = data[index2] || {}
        data[index2][head[index]] = x[k]

      })
    })
    this.displayedColumns=head;
    this.dataSource = data.slice(1); //I remove the first element that was the "header"
  } 

See in stackblitz

Update about the question not use a mat-table else a simple table, just we need iterate using displayedColumns. Some like

<table>
  <tr>
    <th *ngFor="let col of displayedColumns">{{col}}</th>
  </tr>
  <tr *ngFor="let row of dataSource">
     <td *ngFor="let col of displayedColumns">{{row[col]}}</td>
  </tr>
</table>