Sticky row and column for dynamic table

[shaunlaewai]

Hello,
I have a table with dynamic rows and columns as per below. I’ve made the table horizontally and vertically scrollable with 1st row sticky.

For better user experience, I need to make the 1st column sticky as well.
I’ve been searching ways and couldn’t figure out how to do so.
Please kindly help me with this.

[hanan1]

You can do that if you add some css to the first column cell to make it stick to left.

#sticky-column{
    position: sticky;
    left: 0px;
    z-index: 1;
}

here’s how it behaves:

I actually didn’t think it would work but I just tried during break thanks for teaching me something new

[ihsanzainal84]

Best to use CSS classes instead of IDs. Non unique element IDs may or may not cause funky behaviours. It’s a gamble.

[shaunlaewai]

Yes it really works well. But in my case I still need to do to be able to scroll horizontally not only the value table but also the title at once. Only then, title and value will match. Do you have any idea for that as well?