PrimeNG Datatable Sticky Header

A directive providing sticky mode for PrimeNG data table.

I've recently got a request to have a PrimeNG datatable scrolled with the page but have the data table header stick to the top of the page while scrolling. As this feature is not available out of the box with the PrimeNG data table component, I've written a dedicated directive for it.

The directive sets the PrimeNG data table header to sticky mode when scrolling the page. This prevents the header from scrolling with the table thus keeping the user in context and allows data sorting even when scrolled.

Code is available on Github.

Demo: