> For the complete documentation index, see [llms.txt](https://docs.thunkable.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.thunkable.com/~/revisions/A81b2aVlSXGVVaRtdFDr/data-sources.md).

# Data Sources

Connecting your project to a data source allows you to work with the information that you have stored in Airtable, Google Sheets, Webflow or a local table.

The data sources blocks allow you to perform a variety of CRUD (**C**reate, **R**ead, **U**pdate, **D**elete) operations on records you have stored in Airtable, Google Sheets, Weblow or a local tables.

## Connect Your App to a Data Source

There are two ways to connect your app to a source:

1. Add a Data Viewer (list or grid) to your project. More on Data Viewers is available here: [Data Viewers](/~/revisions/A81b2aVlSXGVVaRtdFDr/data-viewers.md), OR
2. Click the Data Sources icon in the menu on the far left and click the ⊕ icon.
3. In the modal that appears, select a previously connected Data Source, or add a new one. 
4. When connecting to a new data source, select from one of the following options: \
   •  [Create your own table](#create-your-own-table)\
   •  [Airtable](#airtable)\
   •  [Google Sheets](#google-sheets)\
   •  [Webflow](#webflow)

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FN1yCnfQzFEREAB3nf3lV%2FScreen%20Shot%202021-11-05%20at%209.30.56%20AM.png?alt=media&amp;token=6102542e-309f-4592-9725-f8bfc1889bb0" alt="" width="563"></div>

## Create your Own Table

{% embed url="<https://youtu.be/2x52CJQsc9M>" %}

To create your own table as a data source:

1. Follow the steps above: [Connect Your App to a Data Source](#1.-connect-your-app-to-a-data-source) and select **Create your own table**.
2. Give your local data source table a name.
3. Click **Create**.
4. To add data to your local table, copy and paste it from another source or click into a cell and type to input the data. <br>

   <div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FNxLmBjlmtMPIjezyrR73%2Fdata%20sources%20-%20local%20table%20-%20app%20vs.%20stored%20DS.png?alt=media&amp;token=486c55cd-b336-4954-bc4f-c6d7b3261b6c" alt="" width="563"><figcaption></figcaption></figure></div>
5. To modify the table's columns:
   * To **update** the table’s column headers, click their names and typ a new header name.
   * To **add** additional columns, click the **+ New Column** button.
   * To **delete** columns, click the **x** in the column’s title box.
6. To modify the table's rows:
   * To **add** additional rows, with your cursor in the bottom row, press your keyboard’s enter or return key.&#x20;
   * To **delete** a row, right-click on it and select **Remove row**.
7. Select your preferred storage option:
   * **App Data Source** - If the data is changed while the app is open, the table's data resets when a user of your app closes and reopens the app. This reduces the time it takes for the app to load on the user's device.&#x20;
   * **Stored Data Source** - If the data is changed while the app is open, the table's data persists when a user closes and reopens the app.&#x20;
8. When your table is complete, click the **X** in the upper right.
9. The newly created local data source is now listed in your project's list of data sources.
   * Click the pencil icon to **rename** the data source.&#x20;
   * Click the data source's name to review and **edit** the data.
   * Click the trash can icon to **delete** the data source from your project.<br>

     <div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FMsHSd4hsSErJR9dILDRq%2FScreen%20Shot%202022-02-04%20at%2012.14.36%20PM.png?alt=media&amp;token=765492b5-66e2-48f0-8e26-d529543efa2b" alt="" width="375"></div>

## Airtable&#x20;

{% embed url="<https://youtu.be/izoH3t0y2hQ>" %}

When using [Airtable](https://www.airtable.com/) as your data source, a base is connected to Thunkable. To connect your Airtable base to your Thunkable project, you have two options:

* API Key (supported until Jan 31, 2024)
* OAuth

#### Connecting by API Key

1. Navigate to your Airtable account page.
2. Copy your API key (a 14-character code beginning with "key").&#x20;
3. Return to your Thunkable tab.&#x20;
4. Paste the copied Airtable API token into the corresponding field.&#x20;
5. Click **Refresh** to see your Airtable bases.&#x20;
6. Select the base you want to use as your data source.
7. Click **Create**.&#x20;

#### Connecting by OAuth

1. Click **Connect to Airtable**.
2. An Airtable authorization screen opens.
3. Click **+ Add a base**.
4. Select the bases you want to authorize access to. <br>

   <div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p>Select all the bases you want your Thunkable projects to have access to. This includes any bases you've previously connected by API key, as well as any new bases you want to connect to Thunkable.</p></div>
5. Click **Grant access**.<br>

   <div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p>If you are connecting by OAuth for the sole purpose of migrating your connection from API Key and are not creating a new data source, you are done. Steps 6 and 7 only apply when creating a new data source. </p></div>
6. Select the correct base from the dropdown menu.
7. Click **Create**.

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FMzd3akpPMODMkkisGDf4%2FAirtable%20-%20DS%20connection%20modal.png?alt=media&amp;token=a456f96d-0484-40dd-a52d-e358b9d11ffc" alt="" width="563"><figcaption></figcaption></figure></div>

#### Use a Custom View&#x20;

In Airtable, a table is similar to a sheet in a spreadsheet. You can have multiple tables within your Airtable base, and each table can have multiple views. A view indicates how the data is presented within the table. For example, you can use views to show only specific fields or records and apply other configurations to manage the information in that view. The initial default view for an Airtable table is the grid view.

When connecting an Airtable base as your Thunkable project’s data source, you can select a custom view instead of the default grid view. This will apply only to the first table in your base. For subsequent tables, Thunkable will use the default grid view. If you have a base with two tables and the second table has a custom view, you can reorder the tables within the base in Airtable so that the custom view is applied to the correct table.

{% hint style="success" %}
Once you've connected your Airtable the Thunkable account via OAuth, API keys are no longer used.
{% endhint %}

## Google Sheets

{% embed url="<https://youtu.be/0YsorQtDsvc>" %}

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

To use a Google Sheet as a data source the following must be true:

* The first row in your sheet must be a header row and every column must have a header.
* Your Google Sheet must be [sharable](https://support.google.com/docs/answer/2494822?hl=en\&co=GENIE.Platform%3DDesktop) so that Thunkable can access the data.&#x20;

To connect a Google Sheet, sign in and grant permission for your Thunkable project to access your Google Drive.

![](https://1223006790-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)

{% hint style="warning" %}
Some users have reported issues connecting to Google Sheets if they are using G Suite for Education accounts. You may need to contact your G Suite administrator to review your security settings.&#x20;
{% endhint %}

Once you have allowed this, you will see a list of spreadsheets in your Google Drive. If you don't see 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://1223006790-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://1223006790-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="info" %}
Looking to reset your Google Sheets connection? [Click here](/~/revisions/A81b2aVlSXGVVaRtdFDr/troubleshooting.md#how-can-i-reset-my-google-sheets-connection-in-thunkable) for instructions
{% endhint %}

## Webflow

{% embed url="<https://www.youtube.com/watch?v=4WLOPIP_WuY/?1>" %}

When using Weblow as the data source for your Thunkable app, you’ll connect to a Webflow CMS or Content Management System collection.&#x20;

To connect your Webflow CMS to your Thunkable project, you have two options:

* API Key
* OAuth

#### Connecting by API Key

Within the Webflow platform:

1. Navigate to your site settings.
2. Click the Integrations tab
3. Under the **API access** header, click Generate API token.&#x20;
4. Copy the Webflow API token.

Within the Thunkable platform:

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FgjYhp31hv2YacvBRdl6s%2Fdata%20sources%20-%20webflow%20-%20API%20Key.png?alt=media&amp;token=05024ecb-9818-4551-b0db-fc4b052ad5a1" alt="" width="375"><figcaption></figcaption></figure></div>

1. Paste the copied Webflow API token into the corresponding field.&#x20;
2. Click **Refresh** to see your Webflow sites.&#x20;
3. Select the site you want to use as your data source.
4. Click **Create**.&#x20;

{% hint style="info" %}
To protect the quality of its service, the Webflow CMS API default rate limit is 60 requests/minute.  Exceeding this limit will result in an error on the Thunkable platform, so please keep this in mind as you build your app.
{% endhint %}

#### Connecting by OAuth

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FzLHi3Q7k4aLtTCSRv4e1%2Fdata%20sources%20-%20webflow%20-%20OAuth.png?alt=media&amp;token=ccafc13d-3d62-4221-ab39-5aac11e29e33" alt="" width="375"><figcaption></figcaption></figure></div>

1. Click **Connect to Webflow**.
2. A Webflow authorization screen opens.
3. Select the sites or Workspaces you want to authorize access to.
4. Click **Authorize app**.<br>

   <figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F38dFiUo6lQ94pf3rSsla%2Fdata%20sources%20-%20webflow%20-%20authorize.png?alt=media&amp;token=0a7f8456-9b15-444a-a430-2f5c69d35c97" alt=""><figcaption></figcaption></figure>

## Data Sources Blocks

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FLv3rkpscNIBaD5P5suet%2FBlocks%20%3E%20App%20Features%20%3E%20Data%20Sources.png?alt=media\&token=4ae3c3d7-b8f3-4d03-b919-e779a4bad92c)

### Create&#x20;

{% embed url="<https://youtu.be/mxyjQRv4aDg>" %}

The `create row in`block allows you to append new rows to the end of your data tables.&#x20;

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5aGJ1wOENtwwwS3swV%2F-M5aPpI5KxOgLLhjwyBr%2Fcreate_row.png?alt=media\&token=9f08bf0a-126a-421e-8826-ea5839c5fed5)

The inputs are dynamic so if you change the name of Column 1 or Column 2 in the designer these changes will be reflected in the block too.

### Read&#x20;

{% embed url="<https://youtu.be/kXex673U2Aw>" %}

The `get value from` blocks allows you get read one value from a specific cell in your data table. You can specify the column name in the block itself and pass the unique row id as an input.&#x20;

Note that each row has its own unique 24 character ID. You must use this ID to refer to rows of your Airtable and Local data sources in the blocks below.

If your data source is a **Google Sheet**, you can refer to the row by its integer position (1 for the first row, 2 for the second row, etc.)

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5aGJ1wOENtwwwS3swV%2F-M5aQR1w75a-0r-buIDD%2Fget_value.png?alt=media\&token=5db182dc-1aad-4a0e-a74b-e45a700cdcdf)

`Get row object` will return the row object of the specified row ID. The row object can be used with [Objects blocks.](/~/revisions/A81b2aVlSXGVVaRtdFDr/objects.md)

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MHVZY9uFn5voyXFM3Ud%2F-MHV_1h1FUtdK1jzgXG6%2Fdarasourcesgetrowobject.png?alt=media\&token=74aa8bbb-fbcc-42a7-9d9d-e0b48851b92b)

The `list of values in` block allows you to read an entire column of data from a table and returns it as a list that you can then manipulate with the built-in [List blocks](/~/revisions/A81b2aVlSXGVVaRtdFDr/lists.md).

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5aGJ1wOENtwwwS3swV%2F-M5aQW9ilyl6tPg1AXVV%2Flist_of_values.png?alt=media\&token=d8192d36-66ad-471e-85e3-5f820e0f97dd)

The `number of rows in` block returns an integer corresponding to how many rows are in a given table.

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5aGJ1wOENtwwwS3swV%2F-M5aQTa3eN2_BPVio35J%2Fnumber_of_rows.png?alt=media\&token=b3a74f22-6636-4e17-8280-4485b7e9f243)

### Update&#x20;

{% embed url="<https://youtu.be/ZvaW8YON2oU>" %}

You can use the `update value in` block to modify or update an existing cell in your data table. The column name is specified in the block itself. Both the **row id** and new **value** are passed as inputs.&#x20;

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5aGJ1wOENtwwwS3swV%2F-M5aTUuc2_Xv2_48bAYG%2Fupdate_value.png?alt=media\&token=5696ec2f-2294-4eac-b194-7c777e5cbceb)

### Delete

{% embed url="<https://youtu.be/Ab66agEf3ok>" %}

#### Delete Row

You can use the `Delete Row` block to delete a row of data from your Data source. \
The `row id` is passed as an input.\
If there is an `error`, the error message is passed as an output.&#x20;

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MG8S3dFqpX5jUIA0MYV%2F-MG8T4RcGnM_Xf8c9r47%2Fdeleterow.png?alt=media\&token=36f901e0-e596-4148-a726-108320cc5464)

#### Delete All Rows

You can use the `delete all rows` block to delete all rows in your data source.\
If there is an `error`, the error message is passed as an output.

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MHVZY9uFn5voyXFM3Ud%2F-MHVaRe5XI7cTbrCazZA%2Fdatasourcedeleteallrows.png?alt=media\&token=4b8b8d86-0188-4be1-abae-d4cf92669ded)

{% hint style="success" %}
**Have feedback on this doc?** Please take a moment to share your feedback here: [Thunkable Docs Feedback](https://docs.google.com/forms/d/e/1FAIpQLSfCwn5L2xyla-LSLZX0DSWFcFeJ43qp-r1tELCacuVS2zduLA/viewform?usp=sf_link). Your valuable insights will help us improve and better serve you in the future.
{% endhint %}