Angular 5 Material-UI dynamic Mat Table from json data

Question

I am hitting an api that can will return different JSON's, each meaning a different table.

This is the generic HTML in my compenent.html

    <table mat-table [dataSource] = "cols" class="mat-elevation-z8">
            <ng-container *ngFor="let col of cols" [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>

The data I'm getting in my component class

getData(){
  this.requestService.getTableData().subscribe(
    data => {
      this.arrData = data as string []; 
       console.log(this.arrData['requestType']);
    },
    error => {
      console.log (error.message);
    }
  )
  this.cols = JSON.parse(this.arrData['responsePayload']);
}

the JSON Data I'm finally getting looks like this

[
  {
    "Company": "Alfreds Futterkiste",
    "Contact": "Maria Anders",
    "Country": "Germany"
  },
....
]

this.cols is my data source for the mat-table and it is populating correctly as an array with 6 entries. I need to make a mat-table out of this, but I keep getting this error

requestHandler.html:6 ERROR TypeError: name.replace is not a function at MatColumnDef.set name [as name] (table.js:175) at updateProp (core.js:32188)

at

       <ng-container *ngFor="let col of cols" [matColumnDef]="col">

Can someone point me in the right direction / tell me where I'm going wrong?

Also, if something isn't clear in the question please let me know I'll try explaining again.

Note: I believe there is a solution in making an interface for the JSON data I'm getting, but I will end up making a slightly static HTML for each type of table. I want to keep it generic. Something like a dynamic interface (which can't be done, I think.) This is kinda cool though, but I need to be able to do this in runtime.

Chathuran D · Accepted Answer · 2019-11-06 09:49:36Z

2

Import MatTableDataSource in your .ts file

import {MatTableDataSource} from "@angular/material";

define cols as below

cols: MatTableDataSource<Any>;

and you have to pass array as MatTableDataSource

 this.cols = new MatTableDataSource(this.arrData['responsePayload']);

and also you can use row wise method

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

       <!-- Company Column -->
       <ng-container matColumnDef="company">
          <mat-header-cell *matHeaderCellDef mat-sort-header> Company </mat-header-cell>
          <mat-cell *matCellDef="let row"> {{row.Company}} </mat-cell>
       </ng-container>

       <!-- Contact Column -->
       <ng-container matColumnDef="contact">
           <mat-header-cell *matHeaderCellDef mat-sort-header> Contact </mat-header-cell>
           <mat-cell *matCellDef="let row" > {{row.Contact}} </mat-cell>
        </ng-container>

       <!-- Country Column -->
       <ng-container matColumnDef="country">
           <mat-header-cell *matHeaderCellDef mat-sort-header> Country </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.Country}} </mat-cell>
       </ng-container>

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

Hope this will helps ..!

answered Nov 6, 2019 at 9:49

Chathuran D

2,43627 silver badges43 bronze badges

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

5 Comments

Bugsy Over a year ago

I did something similar, and it worked. Now I have new problem. How do I add a paginator for each table dynamically.

Chathuran D Over a year ago

@Bugsy could you please ask it as new question, that will helps others also

Chathuran D Over a year ago

@ Bugsy - u can use mat-paginator for that this.cols.paginator as mat-paginator , this will function as Table Paginator

Bugsy Over a year ago

I did face issues with that approach. I will try uploading a fiddle later.

Chathuran D Over a year ago

@Bugsy - What is the issue? Can you post the issue in different question then i can help you. Because if i extend the answer here, with that it will be off topic

Collectives™ on Stack Overflow

Angular 5 Material-UI dynamic Mat Table from json data

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related