-
-
Couldn't load subscription status.
- Fork 389
Description
Describe the bug
Hello!
I am trying to add list virtualization to a tanstack table.
I followed the implementation example from https://github.com/TanStack/table/blob/main/examples/react/virtualized-rows/src/main.tsx. List virtualization is working great, but now it seems like I am forced to use a fixed width column. Before this, each column took a dynamic (different) width based on its content without having text wrapping to a new line and the table was spanning across the full width of the page.
I tried removing the fixed width from columns but then I have "Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops." error:
Your minimal, reproducible example
https://github.com/dragos-cojocaru/tanstack-virtual-table-dynamic-width
Steps to reproduce
I created a repository where you can check the error: https://github.com/dragos-cojocaru/tanstack-virtual-table-dynamic-width:
- table-dynamic-column-width page is where I have the error because I removed the fixed width of columns
- table-fixed-column-width page is where the virtualization is working but I have fixed width for each table column.
Expected behavior
I want to have a tanstack table with virtualization that span across the whole page width and each column width should be dynamically to accommodate its content. Preferably I should be able to specify a max-width for all columns or for each column separately.
How often does this bug happen?
None
Screenshots or Videos
No response
Platform
- Windows 11 Pro
- Chrome 141.0.7390.108 (Official Build) (64-bit)
tanstack-virtual version
3.13.12
TypeScript version
No response
Additional context
No response
Terms & Code of Conduct
- I agree to follow this project's Code of Conduct
- I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.