I'm having trouble implementing a sticky header with p-table in my project. I've followed the CSS provided in the documentation for primeng 7 but it's not working as expected. Can someone please assist me with this issue? Thank you!
Below is the template I am using:
<p-table [columns]="cols" #dt [value]="students" [autoLayout]="true" [paginator]="true" [rows]="100" [rowsPerPageOptions]="[100,200,500]" >
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [pSortableColumn]="col.field">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
This is the CSS I have applied:
:host ::ng-deep .ui-table .ui-table-thead > tr > th {
position: -webkit-sticky;
position: sticky;
top: 69px;
box-shadow: 1px 3px 6px 0 rgba(32,33,36,0.10);
}
@media screen and (max-width: 64em) {
:host ::ng-deep .ui-table .ui-table-thead > tr > th {
top: 99px;
}
}