I am trying to make a table where I can drill down into the data parts. That is easy to do, but what I am having issue with is ensuring all the columns in each sub view line up with the parent table. All tables have the same number of columns, and all share the same header from the first table. I can get it all to line up if I use fixed widths but then the table/data will always be the same width and not stretch across the view or container. I can fix width the first column and let all the others stretch, and that gets it close but they will drift at each sub view. I am also looking for a way to have the sub view be only as high as the table needs for the data, but that is a second issue. I am either looking for a solution using tables and sub views or if there is better component to use to display this kind of data.
Here is an example of the alignment I want.
A combination of strict width on the first column and some left margin/padding to offset the drift should work.
You should be able to add styles to a specific column in its configuration.
For the second problem (subview height) try setting PROPS.virtualized : false. I seem to recall having to do this somewhere.
2 Likes
Right, you need to set the basis of the table to auto, but that just doesn't work when it's virtualized.
2 Likes
The auto sizing is working perfect now. I also had to set the default height of the views that hold the sub tables to something small so it forces it to grow when needed. Thank you for the help.
I managed to figure out the column alignment but I will need to look at it more to understand exactly what I did. It was a combination of what I already had with fixed widths but only for the first column. The rest of the columns I did not need fixed width and set the value of width to a relative size using vw as the units.
