Modus Table - Make the header row sticky at the page level
Prerequisites
- [X] I have searched for duplicate or closed feature requests
- [X] I have read the Modus style guidelines
Proposal
Users can currently enable a vertical scroll on the table by adjusting the maxHeight parameter. When scrolling through the table, the header row remains fixed, as shown in the screenshot (https://modus-web-components.trimble.com/?path=/story/components-table--pagination&args=maxHeight:700px). However, the desired behavior is for the header to remain "sticky" even when scrolling through the entire page, as shown in the example (https://modus-bootstrap.trimble.com/examples/table-with-sticky-header-and-column/).
Current behaviour screenshot:
Expected behaviour:
Motivation and context
No response
What is the issue regarding ?
@trimble-oss/modus-web-components
Priority
Medium
What product/project are you using Modus Components for ?
E-Builder
What is your team/division name ?
E-Builder
Are you willing to contribute ?
Yes
Are you using Modus Web Components in production ?
No response
https://modus-bootstrap.trimble.com/examples/table-with-sticky-header-and-column/ -> This behaviour should be the default.
When sticky-top flag is set, then the table should have the sticky header.
@cjwinsor we're going to begin this story now, is there any feedback on implementation? If I'm understanding the ask, we want a way to keep headers fixed when scrolling the page regardless of the max-height setting.
@apaddock the position: sticky is the modern approach to this. It will stick to the top of whatever its scroll container is. The only trouble may come in depending on overflow being auto. In my experience the two don't play together nicely, but this might be a solved problem by someone. The current modus-table has a wrapper of table-container which sets overflow: auto which will probably give some trouble.
Deprioritizing. This is an old issue. We have sticky headers currently. Unless someone brings up the issue again, we are not going to work on it.