Fixed header in primeng DataTable
I am using PrimeNG 4.1.0-rc.2
.
What I am trying to create is a fixed header datatable. The header should always be visible even if I scroll down the table (like a fixed menu at the top of stackoverflow).
I tried scrollable
and scrollHeight
properties p-dataTable
, but on the side of the table there is scrolling. I don't need this because I already have one for the whole page. Also I tried to fix it with position: fixed
, but then the table headers and table contents are different size.
Any help would be appreciated.
Now I have something like this: http://embed.plnkr.co/bnB2ZDvDPZos3JLMmVFe/
Option enabled scrollable
, and position: fixed
commented out.
source to share
I found a solution, I have to use position: sticky
with scrollable
. Here's an example: http://embed.plnkr.co/jZJ3it0ARLLYSe0zI6DL/
Maybe it will help anyone.
EDIT: Finally, there is one more solution. In 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 the CSS:
.header_scrolled {
position: fixed !important;
top: 60px;
}
source to share
You can also put below code in your @Component
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css'],
styles: ['
:host ::ng-deep .ui-table .stk {
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 9999;
}
:host ::ng-deep .margTop {
position: -webkit-sticky;
position: sticky;
top: 52px;
z-index: 9999;
}
'],
My HTML header looks like this:
<tr>
<th class="stk" rowspan="2" style="width:60px;">Field.</th>
<th class="stk" rowspan="2" style="width:200px;">Field</th>
<th class="stk" rowspan="2" style="width:135px;">Field</th>
<th class="stk" rowspan="2" style="width:105px;">Field</th>
<th class="stk" rowspan="2">Field</th>
<th class="stk" rowspan="2" style="width:105px;">Field</th>
<th class="stk" colspan="2"><p class="text-center">Field</p></th>
<th class="stk" colspan="2"><p class="text-center">Field</p></th>
<th class="stk" rowspan="2">Field</th>
<th class="stk" rowspan="2">Field</th>
<th class="stk" rowspan="2" style="width:60px;">Field</th>
</tr>
<tr>
<th class="margTop">Field</th>
<th class="margTop">Field</th>
<th class="margTop">Field</th>
<th class="margTop">Field</th>
</tr>
source to share