Hi there,
I know there's a native feature that allows us to freeze columns inside of a table, however I'd also like the ability to freeze the header row so when I scroll down I can see each column header:
My current code looks like this inside the Scripts and Styles section:
New to web development so apologize if I'm missing something basic!
Thanks,
If you make the table scrollable, the header will remain in place.
Thanks for the reply!
That solution does work, however I'd like to keep the pagination if possible (the table performance drops quite a bit when scrolling). I was hoping there would be a CSS workaround to the issue.
Hey Shu, I've tested this and putting a position: fixed on this specific CSS selector which I copied from the the chrome dev tools seemed to do the trick:
The selector looked like this on my end:
#rt-table-table1 > div.rt-thead.-header > div
Great, I'll give this a shot! Thanks so much.
Hi Scott.
Where is the feature to make the table scrollable - is it native mode or in JS?
Thanks
This is within the Inspect panel in the component.
Hi.
Might be me but I just cannot see the option. I can freeze the column using pin but not header.
I have pagination and refresh on the toolbar.
Turn off pagination and resize the table to the size you want and it should be scrollable.
sorry. that does not work for me. is it because I am using the free version of retool?
No it is not....
Have you tried to set the table to fix and then adjust the height?
Looks like the table only has 10 rows. Add more data and it should scroll. You also have have the table in a container -why?
Hi Scott.
Thank you for the suggestions - it all works now.
I get the scroll bar when I do not use pagination and the next/previous set when I do.
Either way the column headers now remain as they should.
I use containers because I find it easier to work with groups of components.
And I can play with styles more readily as the container is used on all tabs.
