I’m using angular 9 with angular material and tailwind.
How can I fix the form header so that the header follows when scrolling down the page?
<table @stagger mat-table [dataSource]="dataSource" matSort style="width: 100%;">
<ng-container *ngFor="let column of columns; trackBy: trackByProperty">
<ng-container *ngIf="column.type === 'text'" [matColumnDef]="column.property">
<th *matHeaderCellDef class="uppercase" mat-header-cell mat-sort-header>
{{ column.label }}
</th>
<td *matCellDef="let row" [ngClass]="column.cssClasses" mat-cell>
{{ row[column.property] }}
</td>
</ng-container>
</ng-container>
</table>
Example 1
When I scroll down the header disappears
Example 2
I already tried to use sticky class:
class="sticky top-0 z-50"
And pure css:
.sticky-header {
position: sticky;
top: 0;
background-color: white; /* Para que o cabeçalho não sobreponha o conteúdo */
z-index: 1; /* Para garantir que o cabeçalho esteja acima das linhas */
}
What can I try to do this?
I hope I was clear;
Thanks =D
You are almost there usually to fix headers, add the following classes to your element and the header row :
see the header documentation: material_angular_header_docs
I have provide code to help below:
<th mat-header-cell *matHeaderCellDef class="sticky-header uppercase" mat-sort-header>
{{ column.label }}
</th>
Then to your html file
<tr mat-header-row *matHeaderRowDef="displayedColumns" class="sticky-header"></tr>
OR
This would always work put each column name in an ng-container as shown below, then put all of them in a container <div class="table-container">
<ng-container matColumnDef="name_of_your_column" [sticky]="freezeColumns">
<th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="name_of_your_column">
content</th>
<td mat-cell *matCellDef="let element"> {{element.name_of_your_column}} </td>
</ng-container>