Display multi arrays with rowspan in angular-CodePudding

Hi I am trying to create a table with rowspan based on array lengths. It works for me with 2 nested arrays but I have no idea ho to do it with more nest levels.

For data:

  data = [
    { id: 0, name: 'one', groups: 
    [
    {'name': 'gr1', campaigns :
     [{'name' : 'camp1'}, {'name' : 'camp2'}, {'name' : 'camp3'}]},
     {'name': 'gr2', campaigns :
      [{'name' : 'camp4'}, {'name' : 'camp5'}, {'name' : 'camp6'}]}
    ] },
    { id: 1, name: 'two', groups: [{'name': 'gr3', campaigns : [{'name' : 'camp7'}]}] },
    { id: 2, name: 'three', groups: [{'name': 'gr4', campaigns : [{'name' : 'camp8'}]}] },
    { id: 3, name: 'four', groups: [{'name': 'gr5', campaigns : [{'name' : 'camp9'}]}] }
  ];

I tried:

<table  id="report">
  <!-- Header -->
  <tr>
    <th >Project</th>
    <th>Group</th>
    <th>Camps</th>
  </tr>
  <ng-container *ngFor="let project of data; let i = index;">
    <tr>
      <td [attr.rowspanspan]="project.groups.length"> {{project.name}} </td>
     
      <ng-container *ngFor="let group of project.groups; let j = index">
      <tr>
          <td>
        {{ group.name }}
        </td>
      <!-- <ng-container *ngFor="let campaign of group.campaigns; let k = index">
      <tr>
        <td >
          {{ campaign.name }}
        </td>
      </ng-container> -->
    </tr>
      </ng-container>
 
  </ng-container>
</table>

My goal is to get table like this in picture: image example

For exampleI have code here: working code example

CodePudding user response：

The nature of the table structure in HTML makes it quite difficult to split it programmatically. You could try the following, but then you'll have to style the table yourself:

  <table  id="report">
  <!-- Header -->
  <tr>
    <th>Project</th>
    <th>Group</th>
    <th>Camps</th>
  </tr>
  <ng-container *ngFor="let project of data; let i = index">
    <tr>
      <td>{{ project.name }}</td>
      <td>
        <table>
          <ng-container *ngFor="let group of project.groups; let j = index">
            <tr click="test(group);">
              <td>{{ group.name }}</td>
            </tr>
          </ng-container>
        </table>
      </td>
      <td>
        <table>
          <ng-container *ngFor="let group of project.groups; let j = index">
            <ng-container *ngFor="let campaign of group.campaigns; let k = index">
              <tr click="test(group);">
                <td>{{ campaign.name }}</td>
              </tr>
            </ng-container>
          </ng-container>
        </table>
      </td>
    </tr>
   </ng-container>
</table>

Check out the StackBlitz example.

CodePudding user response：

Should be [attr.rowspan], but I think you should remove it, see your forked stackblitz.

NOTE: I added in the .css to override the bootstrap padding of a table

.table > :not(caption) > * > *
{
  padding:0 .5rem;
}

NOTE2: we use [attr.rowspan] if we have a "flat" array, like this another SO. not when we have an array with "groups"