CODEWITHSUNDEEP
javascriptcssangularprimeng
Sasha Shpota
Sasha Shpota

Reputation: 10310

PrimeNG: stick table header while scrolling

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.

Upvotes: 2

Views: 4531

Answers (2)

Yarden Saada
Yarden Saada

Reputation: 136

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?

Upvotes: 1

Danish Arora
Danish Arora

Reputation: 338

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".

Upvotes: 0

Related Questions