Shadcn Table - Adding rows to table body causes table body to overflow past max height in layout
I have a dynamic data table component. I would like it to take fill in a parent layout and would like the table body to be scrollable while the footer should remain on the bottom of the page. The page should ultimately not have any scroll behavior, only the table body.
However, whenever I add additional rows using the shadncn table component /pagination https://ui.shadcn.com/docs/components/table, all of the rows in the table body cause the entire html page, which was 999px in height, to expand with a table body with all the rows rendered. For the sake of example, i applied a max hieght of 800px to try to constrain the table body I am following the shadcn data table as well. Not sure how to explain best but the screenshots should show what's going on. Does anyone have any suggestions to fix? Not sure if this is where virtualization would be needed This is minimal example i made some time ago. Totally stuck trying to debug this. https://codesandbox.io/p/sandbox/async-cherry-7jzsym?file=/app/table/page.tsx:193,7
However, whenever I add additional rows using the shadncn table component /pagination https://ui.shadcn.com/docs/components/table, all of the rows in the table body cause the entire html page, which was 999px in height, to expand with a table body with all the rows rendered. For the sake of example, i applied a max hieght of 800px to try to constrain the table body I am following the shadcn data table as well. Not sure how to explain best but the screenshots should show what's going on. Does anyone have any suggestions to fix? Not sure if this is where virtualization would be needed This is minimal example i made some time ago. Totally stuck trying to debug this. https://codesandbox.io/p/sandbox/async-cherry-7jzsym?file=/app/table/page.tsx:193,7
1 Reply
conscious-sapphire•3y ago
I do have the same problem with shadcn. I decided to place the footer at the bottom and then applied overflow-y-auto to the table to make the rest of the rows scrollable. Unfortunately, the columns move and cannot be made sticky.