Display multi arrays with rowspan in angular

Question

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: 1, name: 'one', groups: 
    [{'name': 'gr1', campaigns :
     [{'name' : 'camp1'}, {'name' : 'camp2'}, {'name' : 'camp3'}]},
     {'name': 'gr2', campaigns :
      [{'name' : 'camp4'}, {'name' : 'camp5'}, {'name' : 'camp6'}]}
    ] },
    { id: 2, name: 'two', groups: [{'name': 'gr3', campaigns : [{'name' : 'camp7'}]}] },
    { id: 3, name: 'three', groups: [{'name': 'gr4', campaigns : [{'name' : 'camp8'}]}] },
    { id: 4, name: 'four', groups: [{'name': 'gr5', campaigns : [{'name' : 'camp9'}]}] }
  ];

I tried:

<table class="table table-bordered table-hover hidder" 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

Welcome! Can you please provide a [mre]? (emphasis on "minimal" and "example") See [ask] for further guidance. Would it be possible for you to provide a [Stack Snippet](//meta.stackoverflow.com/q/358992/11107541)? — starball, Jan 09 '23 at 20:05

score 0 · Answer 1 · answered Jan 09 '23 at 21:28

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 class="table table-bordered table-hover hidder" 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.

score 0 · Answer 2 · answered Jan 10 '23 at 08:26

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"

Display multi arrays with rowspan in angular

2 Answers2