Creating Dynamic Angular Material table from JSON data

Question

Would like to know if it is possible to create a dynamic Material table from JSON data. The amount of columns and headers should change according to the keys in the JSON. For example this JSON should create this table:

{
     color: "green", code: "#JSH810"
}
,
{
     color: "red", code: "#HF59LD"
}

        Color          Code

        green         #JSH810
        red           #HF59LD

And this JSON should create this table:

{
    id: "1", type: "bus", make: "VW", color: "white"
}

,
{
    id: "2", type: "taxi", make: "BMW", color: "blue"
}

      id     type      make     color

      1      bus       VM        white
      2      taxi      BMW       blue

It should be a material table , i know how to achieve this in HTML table using ngFor

    <table>
      <thead>
        <tr>           
          <th *ngFor="let head of items[0] | keys">{{head}}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of items">           
          <td *ngFor="let list of item | keys">{{item[list]}}</td>
        </tr>
      </tbody>
    </table>

Can anyone help me in converting this to a material table ?

Working Example: therichpost.com/…

Therichpost
– Therichpost

2020-08-28 08:25:16 +00:00
Commented Aug 28, 2020 at 8:25 — Therichpost
– Therichpost, Commented Aug 28, 2020 at 8:25
Sorry man , that example is not a dynamic column example .

Anand Srivastava
– Anand Srivastava

2020-08-28 10:18:10 +00:00
Commented Aug 28, 2020 at 10:18 — Anand Srivastava
– Anand Srivastava, Commented Aug 28, 2020 at 10:18

Muhammed Albarmavi · Accepted Answer · 2020-08-28 07:14:53Z

4

this an example base of the angular material table example you can check it here

the table required two thing displayedColumns list and data source ,

  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;

and for the template

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

  <ng-container [matColumnDef]="col" *ngFor="let col of  displayedColumns">
    <th mat-header-cell *matHeaderCellDef> {{col | uppercase}} </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>

I use ngFor to setup the deader sections and an example you will get the data source from api request , you can get the columns key by get the key of any object from the respond by Object.keys method

export class TableBasicExample {
  displayedColumns: string[];
  dataSource :any[];

  ngOnInit(){
    // http request to get the data 
    this.dataSource = ELEMENT_DATA
    this.displayedColumns= Object.keys(ELEMENT_DATA[0])
  }
}

demo 🌠

edited Aug 28, 2020 at 7:14

answered Aug 28, 2020 at 7:05

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

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

3 Comments

Anand Srivastava Over a year ago

But for this , the displayedColumns array is hardcoded right ? I want that to take it dynamically according to my JSON data , is that possible ?

Anand Srivastava Over a year ago

As the dataSource is of type any[] here , so it will not support pagination and sorting . Is there any way to achieve that being of type any ?

Anand Srivastava Over a year ago

Thank you @malarmavi . I succeeded in my requirements .

Collectives™ on Stack Overflow

Creating Dynamic Angular Material table from JSON data

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related