CODEWITHSUNDEEP
javascripthtmlcssangularhtml-table
Doflamingo19
Doflamingo19

Reputation: 1629

How create create effect rowspan in table

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:

  1. I don't know rowspan which is its value

Anyone can help me?

Upvotes: 2

Views: 2154

Answers (3)

Pankaj Parkar
Pankaj Parkar

Reputation: 136154

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>

Upvotes: 0

SiddAjmera
SiddAjmera

Reputation: 39432

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

  1. Use rowspan="listCount.length".
  2. But just the first column. To get whether the column is first, you can use let first = first in *ngFor.
  3. 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.

Upvotes: 2

sasensi
sasensi

Reputation: 4650

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 ];
}

enter image description here

Upvotes: 1

Related Questions