How to Add Data Dynamically to Mat-Table Datasource

Angular mat-table display dynamic data from key value json in each row

 import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent implements OnInit {
  title = 'jsonDemo';

  ELEMENT_DATA1 = [
    { 'DynamiCCity': 'Hydrogen' , 'DynamicCountry' : 'Country', 'DynamicState' : 'State' , 'DynamicRegion' :'DynamicRegion' , 'dynamic' :'dynamic' },
    { 'DynamiCCity': 'Hydrogen 1' , 'DynamicCountry' : 'Country 1', 'DynamicState' : 'State 1' , 'DynamicRegion' :'DynamicRegion 1' , 'dynamic':'dynamic 1' },
  ];

  displayedColumns: string[] = [];
  dataSource1 = this.ELEMENT_DATA1;
 
  ngOnInit(): void
  {
    this.displayedColumns = Object.getOwnPropertyNames(this.ELEMENT_DATA1[0]);
  }
}


<h2>Demo</h2>

<style>
  table {
  width: 100%;
}
</style>


<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container *ngFor="let item of displayedColumns" matColumnDef="{{item}}">
    <th mat-header-cell *matHeaderCellDef> {{item}} </th>
    <td mat-cell *matCellDef="let element"> {{ element[item] }}</td>
  </ng-container>

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


<router-outlet></router-outlet>

I Hope Above Code is Working Demo of your Issue. It will work as expected.

Angular Mat-Table with Dynamic Columns generate and Data should be populated in horizontal way

displayedColumns: string[] = ['SAMPLERULENAME','DISPLAYNAME1','OPERATOR1','COUNT1','DISPLAYNAME2','OPERATOR2','COUNT2','DISPLAYNAME3','OPERATOR3','COUNT3','DISPLAYNAME4','OPERATOR4','COUNT4'];
  dataSource = ELEMENT_DATA;

  getValue(element, colname){
   console.log(element);
   var lastChar = colname.substr(colname.length - 1);
   console.log(lastChar);
   colname = colname.slice(0, -1); 
   console.log(colname);
   
   if(element["SAMPLERULECONDITIONS" + lastChar]){
    return (element["SAMPLERULECONDITIONS" + lastChar][colname]);
   }
  }

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

<!-- Position Column -->

<ng-container *ngFor="let col of displayedColumns; let i = index" [matColumnDef]="col">

<ng-container  *ngIf="col === 'SAMPLERULENAME'" matColumnDef="SAMPLERULENAME">
<th mat-header-cell *matHeaderCellDef> </th>
<td mat-cell *matCellDef="let element"> {{element.SAMPLERULENAME}} </td>
</ng-container>

<ng-container *ngIf="col !== 'SAMPLERULENAME'">
    <th mat-header-cell *matHeaderCellDef>  </th>
    <td mat-cell *matCellDef="let element">
    {{getValue(element, col)}}
    </td>      
  </ng-container>  
  
</ng-container>

<!-- Header row first group -->
<ng-container matColumnDef="header-row-first-group">
<th mat-header-cell *matHeaderCellDef 
    [style.text-align]="center"
    [attr.colspan]="1"> 
  Name
</th>
</ng-container>

<!-- Header row second group -->
<ng-container matColumnDef="header-row-second-group">
<th mat-header-cell *matHeaderCellDef [attr.colspan]="3"> Second group </th>
</ng-container>

<!-- Header row 3 group -->
<ng-container matColumnDef="header-row-3-group">
<th mat-header-cell *matHeaderCellDef [attr.colspan]="3"> Condition1 </th>
</ng-container>

<!-- Header row 4 group -->
<ng-container matColumnDef="header-row-4-group">
<th mat-header-cell *matHeaderCellDef [attr.colspan]="3">Condition2 </th>
</ng-container>

<!-- Header row 4 group -->
<ng-container matColumnDef="header-row-5-group">
<th mat-header-cell *matHeaderCellDef [attr.colspan]="3"> Condition3 </th>
</ng-container>



<tr mat-header-row *matHeaderRowDef="['header-row-first-group', 'header-row-second-group','header-row-3-group','header-row-4-group','header-row-5-group']"></tr>


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

<!-- Copyright 2018 Google Inc. All Rights Reserved.
  Use of this source code is governed by an MIT-style license that
  can be found in the LICENSE file at http://angular.io/license -->

enter image description here

create dynamic interface for material table datasource

I had a similar problem and solved it by generating a new datasource every time the data changes and then set the paginator and sorter.

EDIT: Add setter for paginator and sorter and change static attribute to false. Also add a check before setting the paginator and sorter in the setDataSource function.

@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator; // change static to false here
@ViewChild(MatPaginator, {static: false}) set matPaginator(value: MatPaginator) {
  if(this.dataSource && value) {
    this.dataSource.paginator = value;
  }
}

@ViewChild(MatSort, {static: false}) sort: MatSort; // change static to false here
@ViewChild(MatSort, {static: false}) set matSort(value: MatSort) {
  if(this.dataSource && value) {
    this.dataSource.sort = value;
  }
}

public setDataSource(data,columns) {  // data -> array of elements; columns -> columns you wish to display
  this.displayedColumns = columns;        
  this.dataSource = new MatTableDataSource<any>(data);  // replace any with your data type
  if(this.paginator) {   // add check here
    this.dataSource.paginator = this.paginator;
  }
  if(this.sort) {  // add check here
    this.dataSource.sort = this.sort;
  }
}

How do I add rows to the dynamic material table in angular with array of rows

I've made some modifications to your code.

At the Mat Cell Definition, I changed your code from:

<ng-container *ngFor="let disRow of customerResponse.customerDataRows;">
    <td mat-cell *matCellDef="">{{disRow}}</td>
</ng-container>

to:

<td mat-cell *matCellDef="let disRow">{{disRow[colIndex]}}</td>

The definition of *matCellDef was empty. Also, as the array of data relies on the position of the data, I used colIndex as the key to find the row data, but I prefer using key/value pair because they are less error prone: if a column of customerHeader is not part of the displayed columns, the row's cells may not match the correct column.

I've made this fork of your stackblitz code with the modifications: https://stackblitz.com/edit/angular-ivy-2ngiqh?file=src/app/app.component.html

---

Related Topics