How to make nested table structure in angular?

Question

 {
    "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?

did you try something??

Joy Biswas
– Joy Biswas

2019-10-02 05:05:04 +00:00
Commented Oct 2, 2019 at 5:05 — Joy Biswas
– Joy Biswas, Commented Oct 2, 2019 at 5:05
yes just edited question with what i tried upto now

DharamChauhan
– DharamChauhan

2019-10-02 05:16:59 +00:00
Commented Oct 2, 2019 at 5:16 — DharamChauhan
– DharamChauhan, Commented Oct 2, 2019 at 5:16
can you post a bigger json?

Joy Biswas
– Joy Biswas

2019-10-02 05:21:30 +00:00
Commented Oct 2, 2019 at 5:21 — Joy Biswas
– Joy Biswas, Commented Oct 2, 2019 at 5:21
Now how about with angular material data tables?

gh0st
– gh0st

2021-01-13 16:08:10 +00:00
Commented Jan 13, 2021 at 16:08 — gh0st
– gh0st, Commented Jan 13, 2021 at 16:08

Joy Biswas · Accepted Answer · 2019-10-02 05:56:21Z

2

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

edited Oct 2, 2019 at 5:56

answered Oct 2, 2019 at 5:36

Joy Biswas

6,5631 gold badge27 silver badges50 bronze badges

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

Comments

SiddAjmera · Accepted Answer · 2019-10-02 05:25:53Z

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>

Chathuran D · Accepted Answer · 2019-10-02 05:33:02Z

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>

Collectives™ on Stack Overflow

How to make nested table structure in angular?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related