PrimeNG p-table header sticky in an Angular 15 not working

Question

I am using the PrimeNG (v15.0.0) library's p-table component in an Angular 15 application, and I am trying to make the table header sticky. However, the sticky attribute is not working as expected.

I tried the offical solution of PrimNG by apply CSS

:host ::ng-deep .p-datatable .p-datatable-thead > tr > th {
            position: -webkit-sticky;
            position: sticky;
            top: 0px;
        }

        @media screen and (max-width: 64em) {
            :host ::ng-deep .p-datatable .p-datatable-thead > tr > th {
                top: 0px;
            }
        }

my HTML template look like:

<p-table [value]="data" [scrollable]="true">
    <ng-template pTemplate="header">
        <tr>
            <th *ngFor="let col of columns; let i = index">
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-data let-column>
        <tr>
            <td>
                {{column.name}}
            </td>
            .
            .
            .
        </tr>
    </ng-template>
</p-table>

In order for the sticky position to work i set the scrollable attribute to true on the p-table element.But header still not sticky.

PS: Before upgrade PrimNG version to v15, it was working correctly!

Answer 1

try to add this styles for component:

:host ::ng-deep .p-datatable-scrollable {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 1000;
}