Pfthb

I need to add one more column with colspan=4 above existing ones, it has got to be sticky, just like another header column. The code is here:

<div class="example-container mat-elevation-z8">
 <div class="wrapper">
 <table mat-table [dataSource]="dataSource"> 

 <!-- Position Column -->
 <ng-container matColumnDef="all" sticky>
 <th mat-header-cell *matHeaderCellDef> Все </th>
 <td mat-cell *matCellDef="let element"> element.all </td>
 </ng-container>

 <!-- Name Column -->
 <ng-container matColumnDef="done">
 <th mat-header-cell *matHeaderCellDef> Выполнено </th>
 <td mat-cell *matCellDef="let element"> element.done </td>
 </ng-container>

 <!-- Weight Column -->
 <ng-container matColumnDef="ctrl">
 <th mat-header-cell *matHeaderCellDef> На контроле </th>
 <td mat-cell *matCellDef="let element"> element.ctrl </td>
 </ng-container>

 <!-- Symbol Column -->
 <ng-container matColumnDef="rjct">
 <th mat-header-cell *matHeaderCellDef> Отклонено </th>
 <td mat-cell *matCellDef="let element"> element.rjct </td>
 </ng-container> 


 <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
 <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

 </table>
 </div>

</div>

How do I make it happen? I tried adding plain html, it didn't work out, just like adding another angular table element.

Finally, the layout should look something like this:

Add a new ng-container for the column, and add a colspan attribute to the th, like so:

<ng-container matColumnDef="grouped">
 <th mat-header-cell *matHeaderCellDef colspan="4"> Grouped </th>
</ng-container>

This will ensure the row spans 4 columns.

Then, add the tr definition, like so:

 <tr mat-header-row *matHeaderRowDef="groupedColumns; sticky: true"></tr>

Here is an example in StackBlitz