Table Layouts Responsive vs. Scrolling

c.townsend.media · 2024-08-08T23:08:03.243Z

I’m having a difficult time wrapping my head around the responsive table layout. I’d like the table to be responsive to a certain degree but when the screen width gets to a certain point I’m ok with it scrolling horizontally. I’m just not sure what the appropriate layout settings are to make that possible. I either end up with a table that squeezes in no matter the width or it blows out the container group it nested in.

As an aside, I’m also curious if it’s possible to create a sticky column like the header. I want to maintain the headers across the top but I’d also like to maintain the first column or two as sticky elements and the rest of the columns scroll. This may not be possible and looking at the code it doesn’t seem that the tables are truly formatted as tables. This could be due to the responsive design.

Any insight into setup for a table that scrolls horizontally after a certain breakpoint or any ideas on how to get sticky columns would be greatly appreciated.

sudsy · 2024-08-12T04:50:02.467Z

c.townsend.media:

Any insight into setup for a table that scrolls horizontally after a certain breakpoint

Yeah, it’s not obvious (and I don’t think it’s specifically described in the documentation), but the easiest way is simply to set a Min width for each column. Then, when the table’s width is less than the sum of the min column widths, the horizontal scrollbar with automatically appear.

Assuming your Table direction is Vertical, click the column “handle” (the letter heading along the top of the preview) to find the setting on the Layout tab of the property editor. (You can’t select a column in the elements tree when the table orientation is vertical.)

Another way to get horizontal scrolling is to enable the Fit width to content setting for the column and then control the width by constraining the cell’s content width.

c.townsend.media:

any ideas on how to get sticky columns

Out of the box, either sticky rows OR sticky columns are supported, depending on the Table direction setting. To get both sticky rows and columns at the same time, some CSS would be required.

EDIT

And oh yeah, make sure Fit width to content is not enabled on the table itself.