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.

What have you done so far? Can you share code please? – Tiger-222 Jun 28 '17 at 16:26 — Tiger-222, Jun 28 '17 at 16:26

gotchabakin · Accepted Answer · 2017-07-05T09:15:16.123

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; 
}

currently when both scroll and column toggling is enabled datatable headers are not behaving correctly (alignment issues), can the solution suggested here be used as solution for that ? — Jagath Jayasinghe, Jul 25 '17 at 16:31

score 0 · Answer 2 · answered Jun 03 '19 at 16:36

You can also put the code bellow into 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 is 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>

Fixed header in primeng DataTable

2 Answers2

Linked