Fixed header in primeng DataTable

Question

I'm using PrimeNG 4.1.0-rc.2.

What I'm trying to create is datatable with fixed header. Header should be always visible even if I scroll my table to the bottom (like fixed menu on the top of stackoverflow).

I tried scrollable and scrollHeight properties of p-dataTable but there is a scroll on the table side. I don't need it because I already have one for entire page. Also I tried to fix it with position: fixed but then table headers and table contents have a different size.

Any help would be appreciated.

Now I have something like this: http://embed.plnkr.co/bnB2ZDvDPZos3JLMmVFe/ There is scrollable option turned on and position: fixed is commented out.

Answer 1

I found solution, I should use position: sticky with scrollable. Here is an example: http://embed.plnkr.co/jZJ3it0ARLLYSe0zI6DL/

Maybe this will help anyone.

EDIT: Finally there is another solution. In the component:

private isScrolled: boolean = false;
constructor(private renderer: Renderer) {
    window.onscroll = () => {
        this.zone.run(() => {
             var header = document.getElementsByClassName('ui-datatable-scrollable-header')[0];
             this.isScrolled = window.pageYOffset > 35; // there is another sticky on the top in my app
             this.renderer.setElementClass(header, 'header_scrolled', this.isScrolled);
        });
    }
}

And CSS:

.header_scrolled {
    position: fixed !important;
    top: 60px; 
}