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

Answer 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>