Check out our Hockey teams sample app to see the Data Viewer grid in action. Click the "Copy Project" button is you'd like to reuse this open-source sample for yourself.
The data viewer components allow you to create beautiful user interfaces for your data. All of this is done in just 3 steps, no blocks required!
To begin using the Data Viewer you need to specify where your data are stored. Thunkable gives you three different storage options.
You can use Google Sheets or Airtable to store data in the cloud. Alternatively, you can create your own table. This is ideal if you want local, offline access to your data. Creating your own table is also the fastest and easiest way to get started with the data viewer.
In the Data_Viewer_List component properties, click the
Add button. In the pop-up modal you can choose an existing data source. If this is your first time using the Data Viewer you can create a new one by clicking on the
Create New button.
Please note that some users have reported issues connecting to Google Sheets if they are using G Suite for Education accounts. The quickest way around this, for now, is to user a personal Gmail account. If you need a large group or class to use this feature then you may need to contact your G Suite administrator to review your security settings.
At this time, connecting to .xlsx files that are hosted on Google Sheets is not supported. You can convert your .xlsx file to a Google Sheet before connecting it to your Thunkable app project. Simply open your .xlsx file on Google Sheets, then click File > Save as Google Sheets.
Start by naming your data source.
Next, select the Data Viewer component and click on the link that says
Click here to edit the data. This allows you to edit the placeholder data that was automatically generated
The data editor allows you to edit, add, and delete columns of information. To change any of the individual values simply click on the cell and type whatever you like.
In Airtable, a base in considered to be the data source. Adding an Airtable is really simple.
To start, copy your API key from your Airtable account page. An Airtable API key is a 14 character code that begins with the three letters "key". Paste this key into Thunkable and click the
Refresh button to see a list of your Airtable bases.
Choose the base you want to use as your data source and click
If you're new to Airtable you can read more about it in our Airtable documentation.
In Google Sheets, the entire document is considered to be the data source.
To connect a Google Sheet, sign in and grant permission for your Thunkable project to access your Google Drive.
Once you have allowed this, you will see a list of spreadsheets in your Google Drive. If you don't seen the sheet you are looking for you can switch to list view, sort alphabetically or search for the one you need. Click
Select to return to your Thunkable project.
Finally, give you data source a name and you're ready to go.
You can also design a Custom Data Viewer Layout and save it with the Layout Type 'Grid' to use it in your Data Viewer Grid.
Finally, you need to manually specify which columns in your data source correspond with which placeholders in your chosen layout. Each layout will have its own specific set of data bindings.
For example, if you use the "Title only" layout, you will only have one data binding, the Title property.
Item Click event is fired when any card in the Data Viewer is clicked. It 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.
The following blocks allow you to work with the height and width properties of the Data Viewer.
The entire Data Viewer can be completely hidden or shown by setting the
Visibleproperty to false or true, respectively.
Refresh the Data Viewer Grid to sync with the Data Source.
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.