CODEWITHSUNDEEP
angulartypescriptangular-material
aw3123
aw3123

Reputation: 139

Dynamic Rows and Columns using Angular material data table

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

Upvotes: 0

Views: 4302

Answers (1)

uminder
uminder

Reputation: 26150

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

Upvotes: 1

Related Questions