> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.teleporthq.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to integrate Data Sources with your TeleportHQ websites

Learn how to add data from API’s and modern databases to your TeleportHQ website to be able to create apps, dashboards, internal tools and more.


| [1. Connect Data source to project ](#2-connect-data-source-to-project) | [2. Map data to individual elements](#3-map-data-to-individual-elements) | [3. Map data to tables](#3-map-data-to-tables) | [4. Map data with array mapper element](#3-map-data-with-array-mapper-element) |

**TeleportHQ supported data sources include:** REST API, Supabase, PostgreSQL, MySQL, MariaDB, Amazon Redshift, MongoDB, Redis, Firestore, ClickHouse, Airtable, CockroachDB, TiDB, Turso as well as through JavaScript, Google Sheets or CSV Files.

| You can connect multiple data sources to the same TeleportHQ project.

## Connect data source to project
To add a new data source to your project:

* Go to the **Left panel -> Data Source Integration**
* **Select a Data source** from the list of integrations
* Follow the steps required for the selected integration
* Click Fetch Database Schema
* Select the data you want to import
* Click Complete Setup

|| Each data source integration will have unique connection requirements. You will find all of the information you need in the connection panel.

![How to connect data source to a teleportHQ project](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/1-data-sources-connect_1jrrjmb.gif)

## Map data to elements

After the selected data source was connected successfully to the TeleportHQ project you can map that data to any element in the project. Data can be mapped to multiple types of elements such as:

### Map data to individual elements

The most basic mapping is on an individual element including text or images.

To map data to an element: 

* **Select the element**
* From the **Right panel** click on the **Link data icon**
* From the **Dynamic panel,** **select the data you want to map**

![Mapping data to an individual element](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/2-data-sources-map-to-element_yadfoi.gif)

### Map data to tables

Tables can also be used to get dynamic data from data sources. To map data to a table:

* From the **Left panel -> Elements**, **Drag a table element** to the project (canvas)
* Go to the** Right panel** and click on the** Link data icon**
* **Choose the data** that you want to import

Once the data is added to the table you can configure which columns are shown and their order. To do this:

* With the table selected go to the **Right panel**
* **Click the Configure columns button**

![Mapping data from data source to a table](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/3-data-sources-map-to-table_dfdxf.gif)

### Map data with array mapper element

Arrays mappers can be used to display multiple items from an imported data list. The array mapper element will repeat a layout added to it as many times as there are elements in the list. The list can of course be configured and limited. To map data with an array mapper: 

* Go to the **Left panel -> Elements**
* **Drag the Array mapper element** to the project
* Go to the **Right panel -> Array mapper settings**
* **Map a list of items** you want to use as a source **to the Array mapper element**
* **Add an element or component inside of the Array mapper** (Items layer)
* **Map data** to **each element** in** the Array mapper**

![Mapping data with an array mapper](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/4-data-sources-map-to-array_sfbij0.gif)