I am getting issue in Angular material table with dynamic table content and header. Here is my JSON data for table.
let dataobj=[
[
{
"key": "Data1",
"value": "ENF"
},
{
"key": "Data2",
"value": "10598489700"
},
{
"key": "Data3",
"value": "3662946630"
},
{
"key": "Comments",
"value": ""
},
{
"key": "Readonly",
"value": "true",
"index": 0
}
],
[
{
"key": "Data1",
"value": "FNS"
},
{
"key": "Data2",
"value": "10598489700"
},
{
"key": "Data3",
"value": "3662946630"
},
{
"key": "Comments",
"value": ""
},
{
"key": "Readonly",
"value": "true",
"index": 1
}
]
]
Here is the code for creating the displayColumnHeader Array value
this.displayColumnHeader = Object.keys(dataobj[0]).map(key => (key));
Below code for passing the value to datatable
this.dataSource = new MatTableDataSource<Element>(dataobj);
Please find the below code for template and bindings
<div class="row">
<div class="col-lg-12">
<div class="example-container">
<mat-table #table [dataSource]="dataSource">
<!-- please check the below code section for this part -->
<mat-header-row *matHeaderRowDef="let header; displayColumnHeader"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayColumnHeader;"></mat-row>
</mat-table>
<mat-paginator #paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]">
</mat-paginator>
</div>
</div>
</div>
Below code section for row and column cell mapping. The below section is I am struggle to map the value for header cell and data cell. Because i don't know the property name when creating the template. it's dynamic.
<ng-container *ngIf="row.key.indexOf('Readonly')<0 && row.key.toUpperCase().indexOf('COMMENTS')<0">
<ng-container>
<mat-header-cell *matHeaderCellDef>{{row.key}}</mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
</ng-container>
</ng-container>