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?
What you're looking for is sticky column, not sticky header, as much as you can combine both Here's an example
Sticky headers are meant to remain visible when you have multiple table items and you scroll "downwards" or vertically. Sticky columns remain visible when an individual table column is scrolled "sideways" or horizontally as demonstrated in your screenshot. Take a look at the documentation