How to do row span for entire column for custom column in angular material table

Question

I added a custom column for angular-material table. For that custom column I have same data for all td in entire table. I need to row span for entire column. I forked the project where I added vendor number custom columnwhere I need to implement this.

I tried these methods

dataLength = DATA.length;

<ng-container matColumnDef="Vendor Number">
    <th mat-header-cell *matHeaderCellDef>Vendor Number</th>
   <td mat-cell *matCellDef [attr.rowspan]="dataLength">vendorNumber</td> 
   
</ng-container>

The above method is mixing in other columns also. Please help me on this. Thank you.

https://stackblitz.com/edit/angular-lnahlh-fby2pp?file=app%2Ftable-basic-example.html

Can Geylan · Accepted Answer · 2022-02-15 15:53:18Z

1

You only want to show one row, the rest can be hidden (display none). Try this:

  <ng-container matColumnDef="Vendor Number">
    <th mat-header-cell *matHeaderCellDef>Vendor Number</th>
    <td
      mat-cell
      *matCellDef="let data; let i = index"
      [attr.rowspan]="dataLength"
      [style.display]="i < 1 ? '' : 'none'"
    >
      vendorNumber
    </td>
  </ng-container>

answered Feb 15, 2022 at 15:53

Can Geylan

2851 silver badge6 bronze badges

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

1 Comment

Madhura Maddipatla Over a year ago

Thank you very much. Working Fine.

Collectives™ on Stack Overflow

How to do row span for entire column for custom column in angular material table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related