Agfdhyk

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