Links

Data Viewer Grid Component

Overview

The data viewer grid lets you connect to a data source and view your data as a grid.

Properties

Data Viewer Grid

Property
Value
Description
Data Source
References chosen data source
The data source your data is pulled from.
Table
References chosen table in data source
The table within your data source your data is pulled from.
Grid Appearance
Select from list
How your data will be displayed in your app.
Populate Data
Select from lists
Map your data source's columns to the fields they will be displayed in.
Horizontal Scroll
True/False
True - data viewer scrolls horizontally
False - data viewer scrolls vertically
Empty text
Text
Text that will be displayed if there is no data in your data source to fill a data viewer field.

Layout

Property
Value
Description
X
coordinate value
Location of the top left corner of the data viewer grid on the X-axis, where the left-hand side is X=0.
Y
coordinate value
Location of the top left corner of the data viewer grid on the Y-axis, where the top side is Y=0.
Height
number in pixels
Height of the data viewer grid in pixels.
Width
number in pixels
Width of the data viewer grid in pixels.
Resize Mode
Stretch
Stretches the data viewer grid to fit the dimensions of the device's screen.
Resize Mode
Float in Place
Renders the data viewer grid in the same aspect ratio as the design, regardless of the device size.

Blocks

Block: When Data Viwer Grid Item Click

The "Item Click" event block is fired when any grid item in the data viewer is clicked. It returns "row id" which corresponds to the unique Thunkable row ID of the item that was clicked. The row id is most useful when used with the the data source blocks.

Block: In Data Viewer Grid Call Refresh Data

Refresh the data viewer grid to sync with the connected data source.

Block: Properties

Set and get properties of the data viewer grid.

Data Viewer Components

If the data viewer grid isn't the best layout to display your data, one of these other options may be more appropriate:

Data Sources Blocks

To access the data sources blocks, you must first connect a data source. Then, by incorporating the data source blocks into your app, you can allow users to create, read, update, and delete data in your data source when they interact with the data viewer.
​

Have feedback on this doc? Please take a moment to share your feedback here: Thunkable Docs Feedback. Your valuable insights will help us improve and better serve you in the future.