Data Viewer Grid
Create powerful, no-code, data-driven apps connected directly to Google Sheets, Airtable, or stored locally.
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.
Property | Description | Data Type |
|---|---|---|
Data Source | Reference to chosen data source | |
Table | Table from your Data Source to show data from | Reference to chosen table in Data Source |
Grid 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 |
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 |
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 Grid component/container | Select from list [Stretch, Float in Place] |
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. 
Refresh the Data Viewer Grid to sync with the Data Source.
Get the computed Height and Width of the Data Viewer Grid as it appears on-screen.
Set and get the Visible property of the Data Viewer Grid
Set and get the Horizontal Scroll property of the Data Viewer Grid
Set and get the Empty Text property of the Data Viewer Grid
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.
Last modified 9mo ago