PrimeNG：滚动时粘贴表格标题

Question

I'm using Angular 4 in pair with PrimeNG 4.2.1.

I need to stick table header on the screen while scrolling its content. Here is an example of how it looks like in PrimeNG JSF components , but unfortunately there is nothing like that in Angular DataTable component .

I tried to use standard html+css way like it is described here or here but I didn't make it work (I managed to have a scroll bar inside a table, however it brakes the rest of the UI). I tried this solution as well, but it doesn't work.

Q: Is there some way to make PrimeNG DataTable component header fixed while scrolling?

I guess the solution might be simple, but I'm not expert in frontend technologies.

UPDATE: There is a possibility to set scrollable and scrollHeight on the DataTable component so scroll bar appears automatically. It works well, however I can't manage to set table size to feet the screen, otherwise it looks ugly.

Answer 1

Here is a link to PrimeNg documentation for data tables. You can find here some examples for several scrollable tables options and the code changes you need to apply.

The easiest implementation would be to use

<p-table [columns]="cols" [value]="value" [scrollable]="true" scrollHeight="200px">

(You might need to upgrade your PrimeNG version for that to work). Is that what you are looking for?

Answer 2

As Mentioned in Update , you should use "[scrollable]="true" scrollHeight="200px"". Set scrollheight according to your need.

One More thing you can use position: sticky for you header and set the desired "top".