In my app, I have a screen with 3 tabs. Inside one of those tabs, there is a table and the table contains a large amount of rows. That’s why I want to make the headers of the table sticky. To be able to see the header names when I have to scroll down. I tried the approach below and nothing has changed. What should I do to make the headers sticky?
Main HTML:
<mat-tab-group class="w-100-p" fxFill style="height:100vh;">
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="mr-8">shopping_basket</mat-icon>
Plan Çalışma Parametreleri
</ng-template>
<tab-material-plan-items [MaterialPlan]="materialPlan"
[(MaterialPlanParameters)]="materialPlan.MaterialPlanParameters"
[MaterialPlanId]="materialPlan.MaterialPlanId"></tab-material-plan-items>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="mr-8">shopping_basket</mat-icon>
Ürün/Reçete Bazlı Sonuçlar
</ng-template>
<tab-material-plan-receipt-result [MaterialPlan]="materialPlan"
[(MaterialPlanReceiptResult)]="materialPlan.MaterialPlanReceiptResults"
[MaterialPlanReceiptResultId]="materialPlan.MaterialPlanId"></tab-material-plan-receipt-result>
</mat-tab>
</mat-tab-group>
Tab HTML:
<form class="w-100-p" #workItemForm>
<table mat-table matSort #table [dataSource]="dataSource" class="w-100-p" style="overflow: auto;">
<ng-container matColumnDef="TotalOrderedQuantity">
<th mat-header-cell *matHeaderCellDef mat-sort-header [ngStyle]="{'color': 'black'}" class="sticky" sticky>
<b>
Sipariş Edilen Miktar
</b>
</th>
<td mat-cell *matCellDef="let row; let i = index"
[ngStyle]="{'color': row.TotalRequiredQuantity == 0 ? '#046307' : ' #E41B17'}">
<div>
{{row.TotalOrderedQuantity | number}}
</div>
</td>
</ng-container>
<ng-container matColumnDef="TotalRequiredQuantity">
<th mat-header-cell *matHeaderCellDef mat-sort-header [ngStyle]="{'color': 'black'}" class="sticky" sticky>
<b>
Planlanan İhtiyaç Miktarı
</b>
</th>
<td mat-cell *matCellDef="let row; let i = index"
[ngStyle]="{'color': row.TotalRequiredQuantity == 0 ? '#046307' : ' #E41B17'}">
<div>
<b>
{{row.TotalRequiredQuantity | number}}
</b>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="sticky"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns; let i = index"></tr>
</table>
</form>
<mat-paginator [pageSizeOptions]="[10, 20, 50, 100]" class="sticky"></mat-paginator>
CSS:
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}