Dynamic Rows and Columns using Angular material data table

Question

Using basic table, I could able to render dynamic rows and column

  <tbody>
    <tr *ngFor="let row of data">
      <td *ngFor="let val of row">
        {{ val }}
      </td>
    </tr>
  </tbody>
</table>

So the same logic, when i tried it with angular mat-table I'm getting this 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>

Please help.

UPDATE

I wanted to display the excel data in mat-table.

I can display it using simple table.

Please look into the below stackblitz

https://stackblitz.com/edit/angular-excel-read-table

[matColumnDef]="col" but how does col change? Therefore it's duplicate. Also. columns: data is another thing that looks wrong to me. It should be a string array of all the column names. See material.angular.io/components/table/overview — Benny Halperin
– Benny Halperin, Commented Apr 11, 2020 at 13:12

uminder · Accepted Answer · 2020-04-11 13:46:10Z

1

The following template should work.

<table mat-table [dataSource]="data">
  <ng-container *ngFor="let columnName of columnNames" [matColumnDef]="columnName">
    <th mat-header-cell *matHeaderCellDef>{{ columnName }}</th>
    <td mat-cell *matCellDef="let row">{{ row[columnName] }}</td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="columnNames"></tr>
  <tr mat-row *matRowDef="let row; columns: columnNames"></tr>
</table>

This expects that the array columnNames is defined in your component class. It should contain the property names of your row objects to be included in your table.

Please have a look at this StackBlitz

edited Apr 11, 2020 at 13:46

answered Apr 11, 2020 at 13:40

uminder

26.4k6 gold badges45 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

aw3123 Over a year ago

I tried its not working, This my stackBlitz stackblitz.com/edit/angular-excel-read-table, Upload any excel data with heading, it should display it in mat-table

uminder Over a year ago

@aw3123: My anwer gives a viable solution to your original question. Please mark it as accepted and post a new question for this new issue.

Collectives™ on Stack Overflow

Dynamic Rows and Columns using Angular material data table

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related