# Data Viewer Components

## Overview

There are two data viewer components: the data viewer list and the data viewer grid. Each of these acts as a presentation layer for your data source. 

## Data Viewer List Component

{% content-ref url="data-viewers/data-viewer-list" %}
[data-viewer-list](https://docs.thunkable.com/app-design/ui-components/data-components/data-viewers/data-viewer-list)
{% endcontent-ref %}

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2Fd6O00hKyoWEmNmmhzUna%2FScreen%20Shot%202022-02-04%20at%2012.47.54%20PM.png?alt=media&#x26;token=ff8576d0-247d-473d-89ca-3fea1e11d397" alt="Example of a data viewer list." width="375"></div>

## Data Viewer Grid Component

{% content-ref url="data-viewers/data-viewer-grid" %}
[data-viewer-grid](https://docs.thunkable.com/app-design/ui-components/data-components/data-viewers/data-viewer-grid)
{% endcontent-ref %}

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2Ft1TN1PCTZx3bfXrf6kwo%2FScreen%20Shot%202022-02-04%20at%2012.44.53%20PM.png?alt=media&#x26;token=01802657-fe92-43b8-8e1b-765f334054ab" alt="Example of a data viewer grid." width="375"></div>

## Custom Data Viewer

Thunkable provides various default [data viewer list](https://docs.thunkable.com/app-design/ui-components/data-components/data-viewers/data-viewer-list) and [data viewer grid](https://docs.thunkable.com/app-design/ui-components/data-components/data-viewers/data-viewer-grid) templates, but saving a customized layout component as a data viewer allows you to display your data in a way that reflects your brand design and preferences.&#x20;

{% content-ref url="data-viewers/custom-data-viewer" %}
[custom-data-viewer](https://docs.thunkable.com/app-design/ui-components/data-components/data-viewers/custom-data-viewer)
{% endcontent-ref %}

## Related Docs

### Data Sources

When a data source powers your app, you can continuously update your app contents without having to republish it. It allows you to build a dynamic app that can create, read, update, and delete data. Thunkable supports Google Sheets, Airtable, Webflow, and local tables as data sources.

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

### Data Sources Blocks

By incorporating the data source blocks into your app, you can allow users to create, read, update, and delete data in your data source when they interact with the data viewer.

{% content-ref url="../../../blocks/app-features/data-sources-blocks" %}
[data-sources-blocks](https://docs.thunkable.com/blocks/app-features/data-sources-blocks)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.thunkable.com/app-design/ui-components/data-components/data-viewers.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.