How to prevent column growth?
I try to create responsive table with pinned column.
I also use size in columns def
accessor("actions", {
header: "",
size: 96,
}),
and it works great. But when the sum of defined colums widths is less than table`s:100%, then every column is growing to fill available space.
is there a possibility to prevent growing some of columns? for example - fix last column, which contains action buttons/icons
4 Replies
variable-lime•16mo ago
You have to incorporate minSize and maxSize as well. I’m on my phone right now but it’s the same thing was the size implementation !
other-emeraldOP•16mo ago
Yes, maxSize, minSize and use it in table render. But, i can't find any solution which allow to fix column size WITHOUT growing. Because columns are filling all available space (it is totally ok) and i can't find a way to prevent growing to specific column.
variable-lime•16mo ago
I think the normal behavior is that any column that doesnt have the size, minSize and maxSize will grow. What I have for one of my app right now is every column has has these properties and they don't grow at all
other-emeraldOP•16mo ago
yes, it pretty normal behavior. But here is the situation - i need to create something like this and this should be responsive. So, for that i use size property, and this documentation - https://tanstack.com/table/latest/docs/framework/react/examples/column-pinning-sticky.
All works great and just one issue with my treeTable because you need to set some fixed width.
If you set column width 1000 then it always will be 1000. If 600, then both of culumns will be growing propoptionaly. (second small column has fixed size - 80px)
and we get two columns +-1000px and +-200px.
My point is to set fixed size to smaller column - 80px AND fix this value. Then first column can be any size (300px, 600, 425px etc.) and fill all available space and be responsive.
Sorry for longread 🫠
React TanStack Table Column Pinning Sticky. Example | TanStack Tabl...
An example showing how to implement Column Pinning Sticky. in React using TanStack Table.
