modus-web-components icon indicating copy to clipboard operation
modus-web-components copied to clipboard

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

Open msankaran0712 opened this issue 2 years ago • 3 comments

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

msankaran0712 avatar Dec 07 '23 14:12 msankaran0712

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.

rthanga1 avatar Dec 08 '23 14:12 rthanga1

@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 avatar Jan 16 '24 14:01 apaddock

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

cjwinsor avatar Jan 16 '24 20:01 cjwinsor

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.

enowak1031 avatar Jan 02 '25 14:01 enowak1031