CODEWITHSUNDEEP
htmlangular
DharamChauhan
DharamChauhan

Reputation: 109

How to make nested table structure in angular?

ar 

 {
    "SolutionsDetail": [
        {
            "SolutionId": 658,
            "name": "dk",
            "id": 1568377327000,
            "groups": [
                {
                    "GroupId": 1,
                    "requestDetails": [
                        {
                            "ReqId": 2331,

                        },

                    ]
                }

            ]
        }
    ]
}

tried from my side :

<ng-container *ngFor="let groupRowData of groups ;let $index=index"> 
<tr>
   <td> {{ grouprowdata.GroupId }}</td>
   <td>
    <tr *ngfor="let requestDetail of groupRowdata.RequestDetails"> {{ requestDetail.reqId}}</tr>
   </td>
</tr>

First column will have my group and second will have my request details based on group(as per json structure). can someone help me on this?

Upvotes: 4

Views: 11193

Answers (3)

Joy Biswas
Joy Biswas

Reputation: 6527

For your left side columns create a rowspan with items in requestDetails.

Now the tricky part is that first row of table will have 1 group-id and 1 requestDetail, but the next rows of the groups will only have one td since the left column is populated by rowspan so loop the requestDetails

This approach will make all data be a part of a single table so indentation and resizing becomes easier

<ng-container *ngFor="let groupRowData of data.SolutionsDetail[0].groups;"> 
  <ng-container *ngFor="let requestDetailData of groupRowData.requestDetails; let $index = index">
    <tr>
      <td *ngIf="$index===0;" [attr.rowspan]="groupRowData.requestDetails.length">Group {{ groupRowData.GroupId }}</td>
      <td>
        {{ requestDetailData.ReqId}}
      </td>
    </tr>
  </ng-container>
</ng-container>

Stackblitz: https://stackblitz.com/edit/angular-hp9gcu

Upvotes: 2

Chathuran D
Chathuran D

Reputation: 2430

IF you need to Use Html Table u can add Multiple div tag for that Like This,

<table>
    <tbody >
      <tr  *ngFor="let group of SolutionsDetail.groups">
        <td>{{group.GroupId}}</td>
        <td>
            <div *ngFor="let requestDetail of SolutionsDetail.requestDetails">
              <div class="class1">{{requestDetail.ReqId}}</div>
              <div class="class2">{{requestDetail.ReqId}}</div>
              <div class="class3">{{requestDetail.ReqId}}</div>
            </div>
        </td>
      </tr>
    </tbody>
 </table>

but My Recommendation , you can design Using and style using Bootstrap or Your Own Styling

for example 

  <div >
    <div class= 'col-md-12'  *ngFor="let group of SolutionsDetail.groups">
        <div class='col-md-4'>{{group.GroupId}}</div>
        <div class = "col-md-8"  *ngFor="let requestDetail of SolutionsDetail.requestDetails">
             <div id="span1" class="col-md-4">{{requestDetail.ReqId}}</div>
             <div id="span2"  class="col-md-4">{{requestDetail.ReqId}}</div>
             <div id="span3"  class="col-md-4">{{requestDetail.ReqId}}</div>
        </div>
     </div>
</div>

Upvotes: 0

SiddAjmera
SiddAjmera

Reputation: 39432

Use colspan to span that col to length of the ReqIds

Give this a try:

import { Component } from "@angular/core";

@Component({...})
export class AppComponent {
  response = {
    SolutionsDetail: [
      {
        SolutionId: 658,
        name: "Group 1",
        id: 1568377327000,
        groups: [
          {
            GroupId: 1,
            requestDetails: [
              { ReqId: 2331 },
              { ReqId: 2331 },
              { ReqId: 2331 },
              { ReqId: 2331 },
            ]
          },
          {
            GroupId: 1,
            requestDetails: [
              { ReqId: 2331 },
              { ReqId: 2331 },
              { ReqId: 2331 },
              { ReqId: 2331 },
            ]
          }
        ]
      }
    ]
  };
}

And in your template:

<table border="1">
    <tr *ngFor="let group of response.SolutionsDetail[0].groups">
        <td colspan="group.requestDetails.length + 1">
            Group {{ group.GroupId }}
        </td>
        <td>
            <tr *ngFor="let det of group.requestDetails">
                {{ det.ReqId }}
            </tr>
        </td>
    </tr>
</table>

Upvotes: 0

Related Questions