# Data Viewer List

{% hint style="info" %}
 If you have any feedback for us about the Data Viewer components please let us know over in the [Thunkable Community](https://community.thunkable.com/t/latest-thunkable-release-new-components-data-viewer-list-and-data-viewer-grid-2020-05-05/564204?u=domhnallohanlon).
{% endhint %}

## 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!

1. [Pick your Data Source](#data-source)
2. [Choose your Item Layout](#list-item-layout)
3. [Set your Data Bindings](#data-bindings)

You can add additional functionality to the Data Viewer List by using the included [component blocks](#blocks) or you can work directly with your raw data by using the [Data Sources blocks](https://docs.thunkable.com/snap-to-place/data-sources).

## Data Source

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](#google-sheets) or [Airtable](#airtable) to store data in the cloud. Alternatively, you can [create your own table](#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.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5TUcYV8jP9gDC_CxOv%2F-M5VzMAIUEeUov3GfVh9%2Fadd_data.png?alt=media\&token=caa539b1-09b9-40b0-b3cd-287d7d4a8685)

In the next modal, choose between [Create your own table](#create-your-own-table), [Airtable](#airtable) or [Google Sheets](#google-sheets) as the source of your data.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5TUcYV8jP9gDC_CxOv%2F-M5W-CeqTNBw8La0vQYc%2Fcreate_data_source2.png?alt=media\&token=ec253741-f70e-4229-af48-7f7e0e0fcf5a)

### Create your Own Table

Start by naming your data source.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5TUcYV8jP9gDC_CxOv%2F-M5W0WKYRIT9CSxsbour%2Fname_local_data2.png?alt=media\&token=9ff168e8-633f-4c36-8638-71d9a4f6375b)

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

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5N089QjP7Y0QSwxJJh%2F-M5N2iemaQupMqrtb3bx%2Fedit_data.png?alt=media\&token=f6eaebb6-f218-4ddd-b713-9b823f8dac55)

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. 

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5TUcYV8jP9gDC_CxOv%2F-M5W2HffumEmAl4knl03%2Fedit_table2.png?alt=media\&token=d11384a7-8751-4781-a859-b6b5ceead828)

### Airtable 

In Airtable, a base in considered to be the data source. Adding an [Airtable DB](https://docs.thunkable.com/snap-to-place/spreadsheet) is really simple. 

To start, copy your API key from your Airtable [account page](https://airtable.com/account). 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 `Create`.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5N089QjP7Y0QSwxJJh%2F-M5N3mC9QL4Sw15eznRB%2Fairtable_setup.png?alt=media\&token=6968a1dd-830e-4099-a14f-57e60467ee6c)

### Google Sheets

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

In order to use a Google Sheet as a Data Source, 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.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5WKUZDPQw2_zsl_vWB%2F-M5WVsV-XrpMPfzSGb1P%2Fsign%20in.png?alt=media\&token=3d4ff936-a74e-43bd-bb49-f9f14abbeb27)

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.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5WKUZDPQw2_zsl_vWB%2F-M5WW49s_8UHw3NCjWZs%2Fselect%20a%20file.png?alt=media\&token=9d22bd0c-17d5-4394-b8e0-e55f6be6e724)

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**.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MHpB8HtC8HSyz0Kqb8S%2F-MHpBn0p_e2Fs7u99yPu%2FScreen%20Shot%202020-09-21%20at%2011.37.46%20AM.png?alt=media\&token=806737ab-0b46-46f7-bbcf-aef125533783)

{% hint style="warning" %}
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. 
{% endhint %}

## List Item Layout

Once you have specified a [data source](#data-source) you can choose your List Item Layout. There are 7 options to choose from. Depending on the raw data you have you can choose a layout that best fits your particular needs

### Title

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5TUcYV8jP9gDC_CxOv%2F-M5W54lHgPb0QcPYYgDp%2Fdlv1.png?alt=media\&token=bd35ba3e-6a2f-47e0-9e78-680870a0e141)

### Title Subtitle

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5TUcYV8jP9gDC_CxOv%2F-M5W57DcDm0H45z2M2NV%2Fdlv2.png?alt=media\&token=544a950f-cb97-4850-986b-59b0cf84118d)

### Image Title 

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5TUcYV8jP9gDC_CxOv%2F-M5W5AQX7UKaMNe5Xkgg%2Fdlv3.png?alt=media\&token=7bd41ec5-8ef6-4485-a546-5ee7f956bf74)

### Image Title Subtitle

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5TUcYV8jP9gDC_CxOv%2F-M5W5EkkYCa0Unq30LgP%2Fdlv4.png?alt=media\&token=9f8db87e-622b-4558-a305-94958abfd390)

### Image Title Subtitle Text

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5TUcYV8jP9gDC_CxOv%2F-M5W5Hl9AYyq1gIXanq3%2Fdlv5.png?alt=media\&token=9f91b000-7b04-43ca-9f20-edd8ec9b95a6)

### Image Title Subtitle Secondary Image Description

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5TUcYV8jP9gDC_CxOv%2F-M5W6-b0ihgzNTtRRS17%2Fdlv6.png?alt=media\&token=5cb4526d-5d8a-4293-9c4a-e37b6f6f7f69)

### Image Title Subtitle Description

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5TUcYV8jP9gDC_CxOv%2F-M5W62vUILepI6ROeb44%2Fdlv7.png?alt=media\&token=a2928b6f-adc8-462e-9128-31e7808d9b79)

### Custom Layout

You can also design a[ Custom Data Viewer Layout](https://docs.thunkable.com/snap-to-place/custom-data-viewer-layout) and save it with the Layout Type 'List' to use it in your Data Viewer List.

## Data Bindings

You can now manually specify which columns in your data source correspond with the placeholders in your chosen layout. Each layout will have its own specific set of data bindings. Two examples are included below for reference.

If you use the [Title](#title) layout, you will only have one data binding, the Title property.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5WDNUANf4C6LYswv-Z%2F-M5WIRllPR78k7CulURW%2Fdata_bindings_1.png?alt=media\&token=89538aa0-a595-4a99-a3c0-e2551bcba86f)

This increases all the way up to five properties, in the case of the [Image Title Subtitle Secondary Image Description](#image-title-subtitle-secondary-image-description) layout.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5WDNUANf4C6LYswv-Z%2F-M5WIV2DvjCC6LMB7Njo%2Fdata_bindings_5.png?alt=media\&token=981a2a88-c224-469b-b137-050d234b6668)

## Left Swipe

You can set a customizable, clickable button to appear when the list item is swiped to the left. If `Left Swipe` is set to true you will see additional options to customize the button text, text color and button background color. 

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5WC_C6XAxt2sULu1ko%2F-M5WDCzmkeyul4fDtEb_%2Fleft_swipe_props1.png?alt=media\&token=7627f234-ab52-41eb-80e7-427810b1b8ba)

When you test this on your phone you will see that each list item can be dragged to the left to reveal a clickable button. The [Left Swipe Click](#swipe) event handler controls what happens when this block is clicked.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5WKUZDPQw2_zsl_vWB%2F-M5WOEXwh6MwkD5yDEG4%2Fleft_swipe_preview.png?alt=media\&token=aa73b500-666c-4b4f-8010-66a09a3a3ba4)

## Right Swipe

You can also set a customizable, clickable button to appear when the list item is swiped to the right.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5WC_C6XAxt2sULu1ko%2F-M5WDKFBtq_xG-_ffWWX%2Fright_swipe_props1.png?alt=media\&token=41998d32-5d88-4040-b49f-2558f507e855)

\
When you test this on your phone you will see that each list item can be dragged to the right to reveal a clickable button. The[ Right Swipe Click](#right-swipe) event handler controls what happens when this block is clicked.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5WKUZDPQw2_zsl_vWB%2F-M5WPbWnIrTRu0n2ymFs%2Fright_swipe_preview.png?alt=media\&token=1925039d-cb5c-455c-9621-2f030be9f8b3)

## Blocks

### Click 

The Item Click event is fired when any list item in the Data Viewer is clicked. It returns a `row id` which corresponds to the unique Thunkable Id of the item that was clicked. The row id is most useful when used with the the Data Source blocks.

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5TUcYV8jP9gDC_CxOv%2F-M5WAGUpG6FaD61ZNbIQ%2Fitem_click.png?alt=media\&token=01b87975-1117-4bf4-8071-d00b2342e7e9)

### Swipe 

The left and right swipe click events are fired when these buttons are clicked. Both return a `row id` to quickly identify which row was clicked when using the Data Source blocks

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5TUcYV8jP9gDC_CxOv%2F-M5WAJZMT_IwmKVCBvPX%2Fleft_swipe.png?alt=media\&token=9dfdd9f3-85b8-4382-b232-5c89564a1fe6)

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5TUcYV8jP9gDC_CxOv%2F-M5WANMmneJEM8zLbmU-%2Fright_swipe.png?alt=media\&token=297822c1-3d91-49cc-ba13-6249babf1c23)

### Height & Width 

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

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5TUcYV8jP9gDC_CxOv%2F-M5WARSLkdilB7x12ktr%2Fdlv_properties.png?alt=media\&token=8252311f-9198-4ae1-8c1a-6c59e1b8233c)

### Visible

The entire Data Viewer can be hidden or shown by setting the `Visible`property to false or true, respectively. 

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5TUcYV8jP9gDC_CxOv%2F-M5WAUxHKR5DmzLCAc6K%2Fdlv_visible.png?alt=media\&token=8e3ead58-b969-4088-93b0-25937503e496)

### Refresh

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

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MHGpTNkuzfTrsA7fYFG%2F-MHGwoDnjb7WUltlwNZp%2Fdvl_refresh.png?alt=media\&token=455c7045-3a38-404a-88f4-67ed543958c4)

### Data Source Blocks

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 (**C**reate, **R**ead, **U**pdate, **D**elete) operations on your data. 

Click on the link below to learn how to use the Data Sources blocks in your project. 

{% content-ref url="data-sources" %}
[data-sources](https://docs.thunkable.com/snap-to-place/data-sources)
{% endcontent-ref %}