Links

Data Viewer List Component

Create powerful, no-code, data-driven apps connected directly to Google Sheets, Airtable, or stored locally.

Overview

The Data Viewer List lets you connect to a Data Source and view your data as a list.
Example of a Data viewer List. Data is dummy data from Webflow.

Properties

Data Viewer List

Property
Description
Data Type
Data Source
The Data Source your data is to be pulled from
References chosen data source
Table
Table from your Data Source to show data from
Reference to chosen table in Data Source
Row Appearance
How your data will be displayed in your app
Select from list
Populate Data
Select what items of data from your data source to show in which aspects of your layout
Select from lists
Left Swipe
Toggle whether your end user can swipe a list item to the left to view an additional Button. Reveals Left Swipe Button settings if set to true
True/False
Left Swipe Button Text
Text of Button visible when user swipes list item to the left
Text
Left Swipe Button Text Color
Text Color of Button visible when user swipes list item to the left
Color
Left Swipe Button Background Color
Background Color of Button visible when user swipes list item to the left
Color
Right Swipe
Toggle whether your end user can swipe a list item to the right to view an additional Button. Reveals Right Swipe Button settings if set to true
True/False
Right Swipe Button Text
Text of Button visible when user swipes list item to the right
Text
Right Swipe Button Text Color
Text Color of Button visible when user swipes list item to the right
Color
Right Swipe Button Background Color
Background Color of Button visible when user swipes list item to the right
Color
Empty Text
Text that will be displayed if there is no data to fill a string in your Data Viewer
Text

Layout

Property
Description
Data Type
X
Location of top left corner of component on X-axis, where the left hand side is X=0
Number
Y
Location of top left corner of component on Y-axis, where the top side is Y=0
Number
Height
Height of component in pixels
Number
Width
Width of component in pixels
Number
Resize Mode
Define dimensions of the Data Viewer List component/container
Select from list [Stretch, Float in Place]

Blocks

Events

Click

The Item Click event is fired when any list item in the Data Viewer is clicked. It returns a row id which corresponds to the unique Thunkable Id of the item that was clicked. The row id is most useful when used with the the Data Source blocks.

Swipe Click

The left and right swipe click events are fired when these buttons are clicked. Both return a row id to quickly identify which row was clicked when using the Data Source blocks

Functions

Refresh

Refresh the Data Viewer List to sync with the Data Source.

Properties

Set and get properties of the Data Viewer List.

Computed Height & Width

Get the computed Height and Width of the Data Viewer List as it appears on-screen.

Visible

Set and get the Visible property of the Data Viewer List

Empty Text

Set and get the Empty Text property of the Data Viewer List

Data Sources

When you connect a Data Source to your project, you will also have access to a Data Sources block drawer. These Data Source blocks allow you to perform a variety of CRUD (Create, Read, Update, Delete) operations on your data.
Click on the link below to learn how to use the Data Sources blocks in your project.