How create create effect rowspan in table

Question

I need to create a table with the first column that has a particular rowspan.

The result that I want is like this in detail I want the all row in the first column together. This is the code .html:

    //This row all toogether in one td
    <tr *ngFor="let count of listCount">
      <ng-container *ngIf="check()">
        <td rowspan="?"....>
        <td>..
      </ng-container>
    </tr>

The problem is that:

I don't know rowspan which is its value

Anyone can help me?

SiddAjmera · Accepted Answer · 2018-11-08 14:57:37Z

2

If you want the first column to span over the complete rows, you'll have to:

Use rowspan="listCount.length".
But just the first column. To get whether the column is first, you can use let first = first in *ngFor.
Since this rowspan count will be dynamic, you'll have to use the Attribute Binding Syntax([attr.rowspan]="listCount.length").

Try this:

<tr *ngFor="let count of listCount; let first = first">
  <ng-container *ngIf="check()">
    <td *ngIf="first" [attr.rowspan]="listCount.length" ....>
    <td>..
  </ng-container>
</tr>

Here's a Sample StackBlitz for your ref.

edited Nov 8, 2018 at 14:57

answered Nov 8, 2018 at 14:34

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sasensi · Accepted Answer · 2018-11-08 14:53:28Z

If you want your column to fill the whole table, you have to set rowspan attribute to equal rows count.
For conveniance, you can use Angular ngFor first local variable to check the first row.
Here is a stackblitz demonstration of the solution.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <table>
      <tr *ngFor="let i of rows; let isFirstRow = first">
        <!-- only display first column if it is the first row and set rowspan attribute -->
        <td *ngIf="isFirstRow" [attr.rowspan]="rows.length">Column 1</td>
        <td>Row {{i}}, column 2</td>
        <td>Row {{i}}, column 3</td>
      </tr>
    </table>
  `,
  styles: [`
    td {
      padding: 15px;
      border: 1px solid;
    }
  `]
})
export class AppComponent
{
  rows = [ 1, 2, 3 ];
}

Pankaj Parkar · Accepted Answer · 2018-11-08 18:43:55Z

0

You can use [attr.rowspan] and you can render all td by looping over columns(create a collection of columns) as well, and as you want you can apply rowspan to first column only. Not completely sure what *ngIf="check()" is :(

<tr *ngFor="let count of listCount">
  <ng-container *ngFor="let column of columns;let first = first; let last = last;">
    <ng-container *ngIf="check()">
        <td [attr.rowspan]="first ? 2: 1"....>
        <td>..
    </ng-container>
  </ng-container>
</tr>

edited Nov 8, 2018 at 18:43

answered Nov 8, 2018 at 14:35

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Collectives™ on Stack Overflow

How create create effect rowspan in table

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related