Angular material table sticky not working on header

Question

I want to use the material table sticky parameter, but for some reason it doesn't work in the table header, it works nicely in the sections below, it just slides in the header when I scroll sideways.

Here is the HTML code:

<div class="table-container">
      <table mat-table [dataSource]="dataSource" matSort>

        <ng-container matColumnDef="select" sticky>
          <th mat-header-cell *matHeaderCellDef class="px-2 w-50px">
            <div class="pr-3">
              <mat-checkbox (change)="$event ? masterToggle() : null" color="warn"
                [checked]="selection.hasValue() && isAllSelected()"
                [indeterminate]="selection.hasValue() && !isAllSelected()" [attr.aria-label]="checkboxLabel()">
              </mat-checkbox>
            </div>
          </th>
          <td mat-cell *matCellDef="let row" class="px-2 w-50px">
            <div class="pr-3">
              <mat-checkbox (click)="$event.stopPropagation()" color="warn"
                (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)"
                [attr.aria-label]="checkboxLabel(row)">
              </mat-checkbox>
            </div>
          </td>
        </ng-container>

        <!-- name -->
        <ng-container matColumnDef="name" sticky>
          <th mat-header-cell *matHeaderCellDef class="pl-3">
            <div class="d-flex flex-column pl-0 pr-2">
              <div mat-sort-header>
                Name
              </div>
            </div>
          </th>
          <td mat-cell *matCellDef="let element">
            <div>
              <!-- ... -->
            </div>
          </td>
        </ng-container>

        <!-- ... -->

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

</div>

I invite everything well, everything works since the sticky in the lines below also works. What can I do to fix the bug so that the sticky works in the header too?

Answer 1

You need to show more of the code to help you. It seems that the tr rows in the table are missing. Try adding the value: "sticky: true" to the *matHeaderRowDef attribute, like this:

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
    (click)="selection.toggle(row)">
</tr>

Here a code snippet: https://stackblitz.com/edit/angular-uzg5aa?embed=1&file=src/app/table-selection-example.html