p-table sticky headers don't work with responsiveLayout="scroll"

bdi-gud commented 2 years ago

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior When we set the property responsiveLayout="scroll" to a table, the sticky header don't work.

Expected behavior The same behaviour as responsiveLayout="stack"

Minimal reproduction of the problem with instructions https://stackblitz.com/edit/primeng-tablesticky-demo Edit primeng sticky demo and add the property responsiveLayout="scroll" to the table

I also tried to set [scrollable]="true" and scrollHeight="flex" as discuss in #11099. The result is the same.

What is the motivation / use case for changing the behavior? To improve the user experience on our applications

Please tell us about your environment:

Angular version: v13
PrimeNG version: 13.3.3
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] Tested on Chrome

bjansen commented 2 years ago

Same problem with autoLayout="true".

According to https://developer.mozilla.org/en-US/docs/Web/CSS/position#values, position: sticky works like this:

a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor.

When we use responsive/auto layouts in p-tables, one of the following CSS rules is applied:

.p-datatable-auto-layout > .p-datatable-wrapper {
    overflow-x: auto;
}

.p-datatable-responsive-scroll > .p-datatable-wrapper {
    overflow-x: auto;
}

This means that sticky elements stick to the datatable wrapper, not to the document body!

Because the table does not scroll vertically (at least not by default), we get the impression that sticky doesn't work. But in reality, it just sticks to the wrong element :(

I'm not sure how this can be fixed or worked around.

MTTarasenko commented 2 years ago

I have similar problem. Was trying to use Group Columns with sticky header. Was able to kind of fix it but got very ugly border view bugs that i am unable to fix. (Border in group column headers became transparent and u can see whats under the header) Demo https://stackblitz.com/edit/primeng-tablecolgroup-demo-igkyzq?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.css,src%2Fapp%2Fapp.component.ts

mertsincan commented 1 year ago

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap? Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

bjansen commented 1 year ago

@mertsincan it looks like the problem is still present, see this fork of the Stackblitz, updated to PrimeNG 14.2.2:

https://stackblitz.com/edit/primeng-tablesticky-demo-xnlcch?file=package.json,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html

If you remove responsiveLayout="scroll", the header sticks correctly.