Custom Data List Viewer Horizontal Scrolling Component

Creating a Custom Data Viewer List
First, read the Thunkable documentation on the Custom Data Viewer Layout.

For this example, I only included a single image, but other components could be added as well.
Step 1. Create a column with absolute height and width of 200, vertical and horizontal alignment of center and the Advanced property of perspective “Rotate Z” of 1.5708. Then add a single image to the column with absolute height and width of 150.

Now save the column as a data viewer layout. Wait a minute or 2 for thunkable to catch up and the layout will appear.

Create a new copy of Screen 1 (see remix below) and add a data list viewer to the Scroll Container column. Click List Item Layout and select the new custom layout. Admittedly, getting all of the rows in columns in rows in columns is complicated, but it is worth it. Most importantly, note that Scroll Row has a rotate z of -1.5708. This is where the magic occurs.

Finally set up the data source for the horizonal scrollable list (for example JSON Bound Data List Viewer - No More Cloning!)

Now you have a high performance horizonal scrolling component

Remix Project
https://x.thunkable.com/copy/3c73f27320178cb1af853c35198e7541

7 Likes

Nice work, Ted!

Wonderful! You’re uncovering so many new sides to the Data Viewer Grid and list. Congratulations, and thanks for this!

Impressive! Can you explain the rotate Z value?

Ha! I wish. I simply followed the instructions on this thread Create Horizontal Scroll (Swipe Like) Row - #9 by farzam-parto

1 Like

i have changed it to Thunkable Tutorials is it ok?

Okay. I did find this:

2 Likes

Whatever that means… :crazy_face:

beautiful.
any simple way to make it row scrollable? my app when i add list new button will created.
i just want the buttons able to scrollable in row.