I'm facing an issue in my application where I have a screen with 3 tabs. One of these tabs contains a table with a large number of rows, and I want to make the headers of this table sticky so that they remain visible when the user scrolls down. Despite trying the method below, I haven't been successful in making the headers sticky. Can someone guide me on how to achieve this?
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;
}