1 year ago

#75440

test-img

sandu

primeng table sticky headers with scrollable true

This problem has surfaced in the past (e.g. Sticky header of p-table not working with [scrollable] = true in Primeng.?) though as the comment to the comment suggests, I too have experienced that previously shared solutions don't work

When we pass [scrollable]="true" primeng applies certain styles, from what I've seen, overflow auto is applied to p-datatable-wrapper thus binding the vertical sticky stylings to that overflow, instead of having horizontal scroll on the tbody and thead and keeping vertical scroll on page so sticky headers would be bound to the page's scroll. Quite tricky...

Here is a quick example, it's a ready playground to test both scenarios https://stackblitz.com/edit/primeng-tablescroll-demo-qm2ndu?file=src/app/app.component.ts

I've tried the obvious things like moving the overflows around but nothing has worked. At this point I don't really have an idea for a solution that's not hard coding a lot of logic to force calculations for constantly setting the top attribute of the headers when we scroll on the page to fake having sticky headers, since they don't work.

I'd love to see primeng update this somehow and provide an easy way to implement the desired behavior.

I've created an issue @ https://github.com/primefaces/primeng/issues/11099

css

primeng

sticky

primeng-datatable

primeng-table

0 Answers

Your Answer

Accepted video resources