1 year ago
#75440

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