search

trimble-oss / modus-web-components

This library provides Modus components as web components - reusable, encapsulated UI elements that are framework agnostic (can be implemented in any site).
https://modus-web-components.trimble.com/
MIT License
34 stars 70 forks source link

Modus Table - Make the header row sticky at the page level #1940

Open msankaran0712 opened 9 months ago

msankaran0712 commented 9 months ago

Prerequisites

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: image

Expected behaviour: image

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

rthanga1 commented 9 months ago

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.

apaddock commented 8 months ago

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

cjwinsor commented 8 months ago

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