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
