CODEWITHSUNDEEP
htmlangular
leventkalayz
leventkalayz

Reputation: 222

How to generate table rows with rowspan in angular html?

I want to iterate on a data list to generate table rows but I don't know how to implement the loop when the cells in one column have a rowspan attribute.

My template markup:

<div class="table-responsive" >
  <table class="table table-striped">
    <tr>
      <th>Project Name</th>
      <th>Project Number</th>
    </tr>
    <tr>
      <td rowspan="3">{{data.name}}</td>
      <td>{{data.number1}}</td>
    </tr>
    <tr>
      <td>{{data.number2}}</td>
    </tr>
    <tr>
      <td>{{data.number3}}</td>
    </tr>
  </table>
</div>

Upvotes: 2

Views: 3422

Answers (2)

Martin Parenteau
Martin Parenteau

Reputation: 73731

You can apply the ngFor directive to an ng-container element, and insert the group of 3 table rows inside of that container:

<div class="table-responsive">
  <table class="table table-striped">
    <tr>
      <th>Project Name</th>
      <th>Project Number</th>
    </tr>
    <ng-container *ngFor="let data of projects">
      <tr>
        <td rowspan="3">{{data.name}}</td>
        <td>{{data.number1}}</td>
      </tr>
      <tr>
        <td>{{data.number2}}</td>
      </tr>
      <tr>
        <td>{{data.number3}}</td>
      </tr>
    </ng-container>
  </table>
</div>

See this stackblitz for a demo.

Upvotes: 2

SiddAjmera
SiddAjmera

Reputation: 39432

Give this a try:

<div class="table-responsive">
    <table class="table table-striped" border="1">
        <thead>
            <tr>
                <td rowspan="3">Project Name</td>
                <td>Project Number</td>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of projects">
                <td>{{data.name}}</td>
                <td>
                    <tr>{{data.number1}}</tr>
                    <tr>{{data.number2}}</tr>
                    <tr>{{data.number3}}</tr>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Here's a Working Sample Stackblitz for your ref.

Upvotes: 0

Related Questions