Freeze/float cell while keeping other cell scrollable

Question

I am creating a table where I need to freeze some cell while keeping the other cell scrollable. The table must be responsive to screen size that is why I need to make some cell scrollable.

Based on the picture above, I want to keep the blue area floating/or freeze while the red area scrollable.

How is this possible in google app maker?

Answer 1

First of all, this widget that you refer to as a table in your sample screen is actually a composite widget where it combines several basic widgets like the list, horizontal panel, and pager.

There is another table widget under charts, called Table chart, that can be used to present your data in rows and columns. But if you are looking for a property that can achieve this UI effect, then I'm afraid AppMaker does not support this yet.

If you are really keen to make this work, I would suggest that you combine two table widgets that inherit the same data source then wrap them SIDE-BY-SIDE in a horizontal panel. The left side will only contain columns that you want to freeze while the right size will have the rest of the column that can be scrollable.

Make sure to set the height of both tables to auto-grow based on the content (Fit to content). This will give the effect that the two tables are merged when doing vertical scrolling.

I have here a sample implementation as I described above. I gave a background to the main container to better understand the concept. I also added a small gap to show that I used two table widgets.

Here is the set-up in editor view (screen-shot)

See it in action here (video)