Freeze container on a horizontal scroll

Ask us anything How do I?
3

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: 0;
    z-index: 1;
}
</style>

You can modify the number in nth-child(1) to modify which column you want to freeze.
Don’t forget to add a background-color to the corresponding cells to hide the overlapped elements.