My approach to rendering dynamic rows and columns using a basic table was successful:
<tbody>
<tr *ngFor="let row of data">
<td *ngFor="let val of row">
{{ val }}
</td>
</tr>
</tbody>
</table>However, when I attempted the same logic with Angular mat-table, I encountered an error:
ERROR Error: Duplicate column definition name provided: "undefined"<mat-table #table [dataSource]="data">
<ng-container [matColumnDef]="col" *ngFor="let row of data">
<mat-header-cell *matHeaderCellDef> {{ row }} </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element[col] }} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="data"></mat-header-row>
<mat-row *matRowDef="let row; columns: data"></mat-row>
</mat-table>I need guidance on this issue.
UPDATE
I am trying to display Excel data in a mat-table. While I can do it easily with a simple table, I am facing challenges with mat-table implementation.
Please take a look at the following StackBlitz for more details: