Angular Mat-Table how to span the header row

user_12121988 0
Viewed 396

I want to use multiple header rows in Mat Table. I can span the columns but failed on spanning on the row.

Please see my stackblitz demo

I want the last column "Cost" across the rows. But I can't get rid of the extra 'cost" column like in the image.

cost column

angular-material angular
2 Answers

enter image description here

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->
  <!-- Position Column -->
 

     <ng-container matColumnDef="position">
        <th mat-header-cell *matHeaderCellDef> No. </th>
        <td mat-cell *matCellDef="let element"> {{element.position}} </td>
      </ng-container>
    
      <!-- Name Column -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
      </ng-container>
    
      <!-- Weight Column -->
      <ng-container matColumnDef="weight">
        <th mat-header-cell *matHeaderCellDef> Weight </th>
        <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
      </ng-container>
    
      <!-- Symbol Column -->
      <ng-container matColumnDef="symbol">
        <th mat-header-cell *matHeaderCellDef> Symbol </th>
        <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
      </ng-container>
    
      <!-- Cost Column -->
      <ng-container matColumnDef="cost">
        <th mat-header-cell *matHeaderCellDef> Cost </th>
        <td mat-cell *matCellDef="let element"> {{element.cost}} </td>
      </ng-container>
    
      <!-- Header row first group -->
      <ng-container matColumnDef="header-row-first-group">
        <th mat-header-cell *matHeaderCellDef [style.text-align]="center" [attr.colspan]="2">
          First group
        </th>
      </ng-container>
    
      <!-- Header row second group -->
      <ng-container matColumnDef="header-row-second-group">
        <th mat-header-cell *matHeaderCellDef [attr.colspan]="2"> Second group </th>
      </ng-container>
    
      <ng-container matColumnDef="header-col-third-group">
        <th mat-header-cell *matHeaderCellDef [attr.colspan]="1" [attr> cost </th>
      </ng-container>
      <!-- Header row third group -->
    
    
      <tr mat-header-row *matHeaderRowDef="['header-row-first-group', 'header-row-second-group']"></tr>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
user_54958630

you just have to decide which one you want to delete the word cost from. you are the one that inserted it twice. to fix this immediately and get rid of it on the top line type or vice versa to the bottom. Or you have to completely remove this line and only leave the latter.

<ng-container matColumnDef="header-row-third-group">
  <th mat-header-cell *matHeaderCellDef [attr.rowspan]="1"></th>
</ng-container>
user_54958630
Related