Drag and Drop
Data Viewer Grid
Create powerful, no-code, data-driven apps connected directly to Google Sheets, Airtable, or stored locally.

Overview

The Data Viewer Grid lets you connect to a Data Source and view your data as a grid. This layout works well with data that includes images.
Example of a Data viewer Grid. Data is dummy data from Webflow.

Properties

Data Viewer Grid

Property
Description
Data Type
Data Source
The Data Source your data is to be pulled from
Reference to chosen data source
Table
Table from your Data Source to show data from
Reference to chosen table in Data Source
Layout
Format of how your data will be displayed in your app
Select from list
Bindings
Select what items of data from your Data Source to show in which aspects of yoru layout
Select from lists
Horizontal Scroll
Toggle whether your Data Viewer should scroll horizontally (if false, Data Viewer will scroll vertically)
True/False
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
Visible
Toggle whether your end users can see the component
True/False

Blocks

Events

The Item Click event is fired when any card in the Data Viewer is clicked.
Returns a row id which corresponds to the unique Thunkable Id of the card that was clicked.
The row id is particularly useful when used with the the Data Source blocks.

Functions

Refresh

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

Properties

Set and get properties of the Data Viewer Grid.

Computed Height & Width

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

Visible

Set and get the Visible property of the Data Viewer Grid

Horizontal Scroll

Set and get the Horizontal Scroll property of the Data Viewer Grid

Empty Text

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

Data Sources

When you connect a Data Source to your project you will also have access to a second 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.