CODEWITHSUNDEEP
htmlcssangular
travis_91
travis_91

Reputation: 173

Table and row span

I have a source of data from a service like the following.

this.ateco2007 = [{code:  this.anagrafica?.ateco2007?.code, description: this.anagrafica?.ateco2007?.description}]

if(this.anagrafica?.atecoSecondari && this.anagrafica?.atecoSecondari.length > 0) {
   let i = 0;
   for(let elem of this.anagrafica.atecoSecondari) {
      this.atecoSecondari.push({
         index: i++,
         code: elem.code,
         description: elem.description
      });
   }

...where ateco2007 has got always one elem, instead atecoSecondari can have multiple values. But there is always a pair code/description.

I want to show this data in a table. The first row will always be one row(ateco 2007), the other rows can be multiple.

I want a structure like this:

The first column will be always fix with the label, the second column shows the code and the last the description.

I tried the following, this is almost correct:

enter image description here

But I want to achieve something closer to the following:

enter image description here

As you see, there is a sort of rowspan and in the second and third columns, the rows have borders and are in the same line.

I tried the following code:

<p-table [value]="ateco2007" [autoLayout]="true">
  <ng-template pTemplate="body">
    <tr>
      <td class="font-weight-bold"> {{'cliente.ateco'|translate}}</td>
      <td>{{ateco2007[0]?.code}}</td>
      <td class="text-left">{{ateco2007[0]?.description}}</td>
    </tr>
    <tr>
      <td rowspan="atecoSecondari.length" class="font-weight-bold">
        {{'cliente.atecoSecondari'|translate}}</td>
      <td>
        <table>
          <tr *ngFor="let elem of atecoSecondari">
            <td>{{elem.code}}</td>
          </tr>
        </table>
      </td>
      <td>
        <table>
          <tr *ngFor="let elem of atecoSecondari">
            <td class="text-left">{{elem.description}}</td>
          </tr>
        </table>
      </td>
    </tr>
  </ng-template>

But I don't know if it's the best way to build the table.

Upvotes: 1

Views: 105

Answers (1)

travis_91
travis_91

Reputation: 173

I solved it in this way

 <p-table [value]="ateco2007" [autoLayout]="true">
   <ng-template pTemplate="body" let-rowIndex="rowIndex">
     <tr>
       <td class="font-weight-bold"> {{'cliente.ateco'|translate}}</td>
       <td>{{ateco2007[0]?.code}}</td>
       <td class="text-left">{{ateco2007[0]?.description}}</td>
     </tr>
     <tr *ngFor="let elem of atecoSecondari">
       <td *ngIf="rowIndex == elem.index" [attr.rowspan]="atecoSecondari.length" class="font-weight-bold">
         {{'cliente.atecoSecondari'|translate}}
       </td>
       <td>{{elem.code}}</td>
         <td class="text-left">{{elem.description}}</td>
      </tr>
   </ng-template>
 </p-table>

I added the rowspan and changed the structure.

Upvotes: 1

Related Questions