How do I freeze the first column and header row?

[edgar]

Hi. I’m hoping that I can get some help for my application. @Joyce
I have 2 main questions.

1. How do I freeze the first column of my table?
2. How do I freeze the header row without it disappearing halfway through?

Setup

• Table is created using stack element (I need the ability for users to drag and drop rows so I chose this element)
• I had to move the header row outside of the stack element to get it to be sticky, but it disappears after vertical scrolling through the entire page
• For the section, I have a fixed width of 100% and a fixed height of 90vh (I want the scroll bars to show up in the page for users who don’t have a touchpad or mouse with horizontal scroll
• Table flexbox is set to 100% fixed width with height set to automatic

Attempts
For question 1, I tried to make the first flexbox of the row sticky.
For question 2, I tried adjusting the table height

Any suggestions are greatly appreciated. Thanks.

[Broberto]

I think @jptrinh made a video about this, or there is at least an answer from him with a solution.

[jptrinh]

Freeze container on a horizontal scroll

Hey @enzocarmo Maybe it’s a bit late, but came up with a solution to freeze any column to the left, inside the Table component. I think adding position: sticky and left:0 would have done the trick, but with the auto-generated wrappers, it’s not working. Fortunately, we can still add some custom styling. This worked for me (add the style to an HTML embed to preview it in the editor) : <style> #myTable .ww-columns.ww-object-elem > .ww-layout > div:nth-child(1) { position: sticky; left…

How can I set the headers of the "Tabs" element to position sticky?

You can target the tabs container with custom css. To preview these changes in the editor, you can put your style in an HTML Embed. Something like that worked for me: <style> .tabs-object .tabs-container[data-v-077c1ff4] { position: sticky; top: 0; } </style> The data-* is probably specific to my component, but you can modify it with your own if you look at the Inspector panel or… you can just go with an !important statement… <style> .tabs-object .tabs-container { position: sti…

You can refer yourself to these posts above Haven’t tried with the stack component but the logic should be close.
Let us know if the solutions worked for you!

[edgar]

Thank you. I’ll take a look and try it out.