📐
Thunkable Docs
Build an AppDrag and Drop DocsSnap to Place Docs
Snap to Place
Snap to Place
  • 👋Welcome to Thunkable Docs
  • 👶Getting Started
    • Signing In
    • Your Thunkable Projects Page
    • Tutorials
    • Live Test your App
  • 🆕Create New Project
    • Project Settings
    • Project Assets and Sizes
  • Thunkable Sample Projects
  • Public Gallery of Projects
  • 🛠️ Components
  • 🔘User Interface
  • Button
  • Label
  • Text Input
  • List Viewer
  • Web Viewer
  • Switch
  • Slider
  • Alert
  • Loading Icon
  • Date Input
  • Time Input
  • PDF Reader
  • Rating
  • 📊Data Viewers
  • Data Viewer List
  • Data Viewer Grid
  • Custom Data Viewer Layout
  • Data Sources
  • 📐Layout
  • Top Tab Navigator
  • Bottom Tab Navigator
  • Stack Navigator
  • Drawer Navigator
  • Screen
  • Row
  • Column
  • 📷 Image
  • Image
  • Photo Library
  • Camera
  • Barcode Scanner
  • Image Recognizer
  • Animation by Lottie
  • Video
  • Video Recorder
  • 🗄️ Data
  • Local Storage
  • Local DB
  • Realtime DB by Firebase
  • Airtable
  • Media DB by Cloudinary
  • File Picker
  • Web API
  • 🌍Location
  • Maps by Google and Apple
  • Location Sensor
  • 💲Monetization
  • Ads by AdMob
  • In-App Purchase
  • 🌐Sensors
  • Gyroscope
  • Magnetometer
  • Accelerometer
  • Timer
  • Bluetooth Low Energy
  • 🔊Voice
  • Sound
  • Text to Speech
  • Speech Recognizer
  • Translator
  • Audio Recorder
  • 🤝Social
  • Share
  • Email Sign In by Firebase
  • Push Notifications by One Signal
  • 🎮Gaming
  • Canvas
  • Sprites
  • Sprite Gallery
  • Canvas Label
  • 🤖Gaming Blocks🎮
  • Events
  • Motion
  • Looks
  • Direction
  • Sensing
  • Add & Remove
  • Stage
  • Canvas Label
  • 🤖Blocks
  • Control
  • Logic
  • Math
  • Text
  • Lists
  • Color
  • Objects
  • Device
  • Variables
  • Functions
  • "Any Component" Blocks
  • 🖥️ App Services & Emulators
  • 🔒App Data Privacy
  • ➕Make Copy
  • 📥Download
  • 📤Share
  • 📱Publish
  • Publish to App Store (iOS)
    • TestFlight Overview
      • TestFlight in Depth
  • Publish to Play Store (Android) with AAB
  • Publish as a Web App
  • Generate Screenshots
  • 🔎Troubleshooting
    • Login Issues
    • FAQs
  • 📏Intro to Spacing
  • 🖼️ Intro to Sizing
  • 🔤Fonts
  • 💾Managing Storage
  • 📝Bugs and Product Feedback
  • Snap to Place Hour of Code Videos
Powered by GitBook
On this page
  • Video Tutorial
  • Sample App
  • Overview
  • Data Source
  • Create your Own Table
  • Airtable
  • Google Sheets
  • Layouts
  • Image with partial Title overlay
  • Title only
  • Image Title Subtitle (Left Aligned)
  • Image and Title
  • Image Title Subtitle (Centre Aligned)
  • Circular Image Title Subtitle
  • Image with Title overlay
  • Custom Layout
  • Data Bindings
  • Blocks
  • Click
  • Height & Width
  • Visible
  • Refresh
  • Data Sources

Was this helpful?

Export as PDF

Data Viewer Grid

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

PreviousData Viewer ListNextCustom Data Viewer Layout

Last updated 2 years ago

Was this helpful?

Video Tutorial

Sample App

Overview

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!

Data Source

To begin using the Data Viewer you need to specify where your data are stored. Thunkable gives you three different storage options.

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.

Create your Own Table

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.

Airtable

Choose the base you want to use as your data source and click Create.

Google Sheets

In Google Sheets, the entire document is considered to be the data source.

In order to use Google Sheets, the first row in your Sheet must be a header row.

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.

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.

Layouts

Image with partial Title overlay

Title only

Image Title Subtitle (Left Aligned)

Image and Title

Image Title Subtitle (Centre Aligned)

Circular Image Title Subtitle

Image with Title overlay

Custom Layout

Data Bindings

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. Here is what your Data Bindings section will look like if your chosen Data Viewer Grid layout has an Image, Title and Subtitle field:

Blocks

Click

Height & Width

The following blocks allow you to work with the height and width properties of the Data Viewer.

Visible

The entire Data Viewer can be completely hidden or shown by setting the Visibleproperty to false or true, respectively.

Refresh

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

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.

Check out our Hockey teams 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.

If you have any feedback for us about the Data Viewer components please let us know over in the .

You can add additional functionality to the Data Viewer Grid by using the included or you can work directly with your raw data by using the .

You can use or to store data in the cloud. Alternatively, you can . 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 next modal, choose between , or as the source of your data.

In Airtable, a base in considered to be the data source. Adding an is really simple.

To start, copy your API key from your Airtable . 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.

If you're new to Airtable you can read more about it in our documentation.

You can also design a and save it with the Layout Type 'Grid' to use it in your Data Viewer Grid.

The 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 blocks.

sample app
Thunkable Community
Airtable
account page
Airtable
Custom Data Viewer Layout
Data Source
Data Sources
Pick your Data Source
Choose your Item Layout
Set your Data Bindings
Data Sources blocks
component blocks
Google Sheets
Airtable
create your own table
Create your own table
Airtable
Google Sheets