in PrimeNG table scrollable=true sticky header is not working

[Rajput94]

<p-table
[value]="customers"
[scrollable]="true"
[rows]="20"
[paginator]="true"
[showCurrentPageReport]="true"

Name Country Representative Status {{ customer.name }} {{ customer.country.name }} {{ customer.representative.name }} {{ customer.status }}

styles: [`
: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;
        }
    }

`]

[cetincakiroglu]

Hi,

Could you please create a Stackblitz example so we can identify the issue?

[Rajput94]

https://stackblitz.com/edit/primeng-tablesticky-demo-vcidwy?file=src%2Fapp%2Fapp.component.html

[Rajput94]

Is this URL ok ?

[cetincakiroglu]

Hi,

The scrollable feature breaks the sticky, it's true because it does not have support for the sticky. Sticky is not an actual feature of primeng is a little CSS tweak actually. As an alternative, you can achieve the same thing by vertical scroll https://primeng.org/table#vertical-scroll or you can try to make sticky work by custom CSS.

Here is an implementation of vertical scroll to your example https://stackblitz.com/edit/primeng-tablesticky-demo-vcidwy?file=src%2Fapp%2Fapp.component.html