continuing-cyan

Auto Column Size

How can I have auto/dynamic/fit-content column sizes instead of fix sized column sizes? So the column fits the size of its content (all cells in the column). It doesn't have to work with column resizing. I'm basing of this example, which has a sticky header, making this slightly more 'complicated'. Though, this should be an essential feature for TanStack Table, I simply haven't found it in the docs. https://tanstack.com/table/v8/docs/framework/react/examples/virtualized-rows No mentions about this in the columns sizing guide: https://tanstack.com/table/v8/docs/guide/column-sizing I've also stumbled on this GitHub issue, but it provides a solution that does not work with a sticky header, and provides only other hacky solutions: https://github.com/TanStack/table/discussions/3192 Is there not a simple, non-hacky way to achieve this essential feature for a table? Thanks

8 Replies

deep-jade•13mo ago

Is there a feature request for this in the repo yet?

continuing-cyanOP•13mo ago

Those are the only discussions I've found about it: * https://github.com/TanStack/table/discussions/4179 * https://github.com/TanStack/table/discussions/3192 (also linked above)

other-emerald•13mo ago

I think you’re just looking for a way to auto layout your table based on its content, right? If so, table-layout is the css property. You need to set that to auto, which it should be by default. You may well have it set to fixed right now. https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

MDN Web Docs

table-layout - CSS: Cascading Style Sheets | MDN

The table-layout CSS property sets the algorithm used to lay out cells, rows, and columns.

continuing-cyanOP•13mo ago

table-layout's default value is auto The problem is that the example I'm following is splitting the <table> into <thead>, <tbody> & <tfoot>, which makes the columns not aligned between these elements Originally I was using css grid but I haven't found a way to make TanStack virtualized/table work with css grid, because virtualized needs to transform: translateY(...) with position: absolute, which breaks css grid Also this would not work properly because it would fit the content of the visible cells only, so the colum size would potentially resize when scrolling. Column size should fit-content of all the cells visible & off-screen

flat-fuchsia•13mo ago

I can confirm that this is exactly what is happening. Jumping row widths on virtualized table rows

continuing-cyanOP•13mo ago

I can’t even get to that point

flat-fuchsia•12mo ago

We are using table html syntax not divs or grids, that had some auto column sizing out of the box by html specification. I would love to have more control over it, but it seems a complex topic I cannot prioritise over other tasks I have.

continuing-cyanOP•12mo ago

Haha (this is such an essential feature, I can't understand how this could ever become a blocker, + this looks like the #1 react table library out there, its crazy this feature does not exist). It does not work out of the box if you use <thead>, <tbody> & <tfoot> like the example I'm following. I've found a solution, but I'm not using TanStack table, just TanStack virtualized with my own table system.

Gaming

Programming

Auto Column Size

Did you find this page helpful?