2

I am trying to implement both [scrollable]="true" and stick header in p-table of PrimeNg. But sticky header works fine if I won't use the scrollable. If I implement both, scrollable is working but sticky header is not working.

I used the following css from primeng for the sticky header.

 :host ::ng-deep .ui-table .ui-table-thead > tr > th {
        position: -webkit-sticky;
        position: sticky;
        top: 69px;
        box-shadow: 1px 3px 6px 0 rgba(32,33,36,0.10);
    }

    @media screen and (max-width: 64em) {
        :host ::ng-deep .ui-table .ui-table-thead > tr > th {
            top: 99px;
        }
    }

and for scrollable I used the below code, [scrollable]="true"

<p-table [columns]="cols" [value]="cars1" [scrollabe]="true">
...
 <th *ngFor="let col of columns" >

If I remove [scrollable]="true" sticky header works fine. How can I make it works both things.? Here is the stackblitz.

Karoui Anwar
  • 23
  • 2
  • 6

2 Answers2

1

The structure in the scrollable table is different. so you should give the sticky style to this ancestor element instead:

:host ::ng-deep .ui-table-scrollable-header{
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 1000;
}

See it live on stackblitz

Minimal example to describe the issue:

the below sticky header is not working because we added sticky to the wrong element. to fix it we should add the sticky to .header instead:

<div style="height: 1500px; background: #def;">
  <div class="header" style="background: #fed;"><!-- <- instead add sticky to here -->
    <div style="position: sticky;top: 0;">header</div> <!-- <-- not here -->
  </div>
  <div class="body" style="background: blue; height: 1500px;">
    <div>body</div>
  </div>
</div>

minimal example buggy version | minimal example fixed version

yaya
  • 7,675
  • 1
  • 39
  • 38
0

I also just ran into this problem, after some digging into the cause of it I ended up opening an issue where I give my take on the problem, perhaps they'll eventually make some changes on the way scrollable works https://github.com/primefaces/primeng/issues/11099

sandu
  • 66
  • 10
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/30875765) – Alexis Philip Jan 26 '22 at 13:13
  • @AlexisPhilip Sorry but I did answer the question, it's a problem with prime ng, thus the github issue. Though someone out there might find a solution eventually, until then we at least know there's a problem and that's all we have. In case github issue changes, I'll include here [my stackoverflow post which won't change](https://stackoverflow.com/questions/70788517/primeng-table-sticky-headers-with-scrollable-true) – sandu Jan 27 '22 at 15:58