Scroll Table Body with sticky head
Is it possible to make a Table Body scrollable with a sticky Table Head at the top? I use shadcn ui as ui "Library" and want to creat a data table with it. The table holds e.g. 1000 items. I found a solution where I can make the whole table scrollable with a sticky table head but there are two problems I don't like. The scollbar is displayed on the full height, also over the table head. I want it only to reach over the table body height. Also the bottom border of the table head goes away on scrolling. Is it possible to make just the table body scrollable?
4 Replies
provincial-silver•17mo ago
@MyOwnBrain i have similiar problem. did you find solution?
yappiest-sapphireOP•17mo ago
@perseus I found a workaround but it is not a good solution. I replaced the Table Tags (table, th, tb, tr, td, ...) with div tags. The Problem occurs because of the display values of Table Tags. So I use flexboxes to create a similar visual effect of a table. The Problem with that is, that if the content of one cell is to big the cells can have different sizes, which breaks visually the columns. For our Project we know how long the content of different cells can be in max and restrict each column on its max width, so it fits in our layout. In my opinion this is a good workaround for our project but not in general. For now this is enough for our project and it works. But to really have an unbreakable Table you have to recode the table logic.
By doing research by myself for this case I found a "solution" where you make the table head sticky an move the body by the th height from the top, but then the scrollbar is also displayed next to the th and not just next to the tb.
I hope you understand what I mean. If you need help, ask and I will do what I can. 🙂
provincial-silver•17mo ago
oh thanks for quick answer. glad to hear you find solution for your project. I actually tried to make 3 table with display flex. i have some columns pinned left (left Table), center (which needs to scroll x, has over 10 columns.), right which columns pinned right. My new problem when i do overflow my center table, i lost sticky feature sadly 😦
i seperated middle table header and body. and connect scrolls each other. now its working : )
yappiest-sapphireOP•16mo ago
Happy to hear that. For that Problem there is not really a short solution, that works for everyone, I think. Since it is not implemented and really hard to handle, you have to find a solution for your use case. 👍