How to create Nested Table in Angular? - html

Question

I am creating a dynamic table with the data array
let data = [{
"criterialimitId": "3",
"criteriaName": "Test",
"criteriaId": "1",
"criteria": "Max Wager",
"type": "DAILY",
"oprLimit": "2.5",
"status": "1",
"action": "SALE_HOLD",
"plrLimitAllowed": "YES",
"createdAt": "2020-09-22 13:30:02.0",
"updatedAt": "2020-09-22 13:30:02.0",
"attributes": [{
"serviceId": "1",
"serviceName": "Draw Game",
"providers": [{
"providerId": "1",
"providerName": "IGT",
"games": [{
"gameId": "1",
"gameName": "LOTTO"
},
{
"gameId": "2",
"gameName": "LOTTO2"
}
]
},
{
"providerId": "2",
"providerName": "ABC",
"games": [{
"gameId": "2",
"gameName": "AB1"
},
{
"gameId": "23",
"gameName": "AB2"
}
]
}
],
"type": "DAILY",
"status": "1",
"createdAt": "2020-09-22 13:30:03.0",
"updatedAt": "2020-09-22 13:30:03.0"
}]
}]
console.log(data)
I want a table like this:
But I am getting the output like this:
Should I use nested table? How to achieve this?
This is my code so far.
.................
....................
..........................
............................
I don't know what more to explain. #stackoverflow is not letting me post my question because "It looks like your post is mostly code; please add some more details." what more details are required? If anybody can assist, it would be helpful.
<table style="table-layout: fixed;" class="table table-bordered">
<thead>
<tr>
<th class="text-center align-middle">Service Name</th>
<th class="text-center align-middle">Provider Name</th>
<th class="text-center align-middle">Game Name</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let attribute of data.attributes">
<tr>
<td>{{attribute.serviceName}}</td>
<td>
<tr *ngFor="let provider of attribute.providers">
<td>
{{provider.providerName}}
</td>
</tr>
</td>
<td>
<tr *ngFor="let provider of attribute.providers">
<td *ngFor="let game of provider.games">
{{game.gameName}} <br>
</td>
</tr>
</td>
</tr>
</ng-container>
</tbody>
</table>

Answer 1

I solved it like this :
<table style="table-layout: fixed;" class="table table-bordered">
<thead>
<tr>
<th class="text-center align-middle">{{'criteriaLimit.serviceName' | translate}}</th>
<th class="text-center align-middle">{{'criteriaLimit.providerName' | translate}}</th>
<th class="text-center align-middle">{{'criteriaLimit.gameName' | translate}}</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let attribute of data.attributes; let i = index;">
<ng-container *ngFor="let provider of attribute.providers; let j = index">
<ng-container *ngFor="let game of provider.games; let k = index">
<tr>
<td class="text-center align-middle" *ngIf="j==0 && k==0" [attr.rowspan]="calculateSpan(i)">{{attribute.serviceName}}</td>
<td class="text-center align-middle" *ngIf="k==0" [attr.rowspan]="provider.games.length">{{provider.providerName}}</td>
<td class="text-center align-middle" >{{game.gameName}}</td>
</tr>
</ng-container>
</ng-container>
</ng-container>
</tbody>
</table>