CODEWITHSUNDEEP
htmlangulartypescript
my trung
my trung

Reputation: 57

How do you use colspan and rowspan?

I have data

this.input = [
  { id: "1", text: "text 1", value: "value 1", desc: "desc1" },
  { id: "2", text: "text 1", value: "value 2", desc: "desc2" },
  { id: "3", text: "text 2", value: "value 3", desc: "desc3" }
]

So, I want merge rows and columns.

result:

enter image description here

Can you please help me? Thank you!

Upvotes: 0

Views: 57

Answers (1)

Alireza Ahmadi
Alireza Ahmadi

Reputation: 9953

First you need to group your data with text key like this:

  this.Groupedinput = this.input.map(x => x.text)
    .filter((v, i, a) => a.indexOf(v)==i)
    .map(x => ({ 
      text: x, 
      array: this.input.filter(y => y.text === x)
    }));

And then you should create nested *ngFor like this:

<table class="table table-sm">
  <tr *ngFor="let data of Groupedinput; let i=index">
      <td>{{data.text}}</td>
      <td>
        <tr *ngFor="let innerdata of data.array">
            <td>{{innerdata.value}}</td>
            <td>{{innerdata.desc}}</td>
        </tr>      
    </td>
  </tr>
</table>

Here is working sample I created for you: StackBlitz

And the result:

enter image description here

Upvotes: 2

Related Questions