Table with virtualized columns and dynamic column width
Hello,
I'm involved in a project using the Tanstack Table and Virtual to create a table with N columns. We follow this example - https://tanstack.com/table/latest/docs/framework/react/examples/virtualized-columns.
It worked flawlessly, even when dealing with over 3,000 columns. However, this table has a behavior that allows users to toggle between showing and hiding the entire width of the columns. Initially, when a user chose to display the full width, we set all columns to the same width. You can observe this behavior in the attached video.
The upcoming phase will focus on adjusting the column widths to accommodate the content size when users opt for 'show full screen'. However, we're uncertain about the most effective method for achieving this. We've considered setting the column widths to 'auto', but encountered issues with virtualization. Another option was to iterate through all columns, validate text size, and adjust column size accordingly, but we're unsure if this is optimal. Your expertise in UI/UX design and front-end development could greatly help us in this matter.
I really appreciate any help you can provide.
I'm involved in a project using the Tanstack Table and Virtual to create a table with N columns. We follow this example - https://tanstack.com/table/latest/docs/framework/react/examples/virtualized-columns.
It worked flawlessly, even when dealing with over 3,000 columns. However, this table has a behavior that allows users to toggle between showing and hiding the entire width of the columns. Initially, when a user chose to display the full width, we set all columns to the same width. You can observe this behavior in the attached video.
The upcoming phase will focus on adjusting the column widths to accommodate the content size when users opt for 'show full screen'. However, we're uncertain about the most effective method for achieving this. We've considered setting the column widths to 'auto', but encountered issues with virtualization. Another option was to iterate through all columns, validate text size, and adjust column size accordingly, but we're unsure if this is optimal. Your expertise in UI/UX design and front-end development could greatly help us in this matter.
I really appreciate any help you can provide.
An example showing how to implement Virtualized Columns. in React using TanStack Table.
