> 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/app-design/ui-components/data-components/data-viewers.md).

# 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="/pages/-M0Iz4G7zRNg7qOgQ5U0" %}
[Data Viewer List Component](/app-design/ui-components/data-components/data-viewers/data-viewer-list.md)
{% endcontent-ref %}

<div align="left"><img src="/files/Y8D3Ms7UBIQY3SKKpD6Q" alt="Example of a data viewer list." width="375"></div>

## Data Viewer Grid Component

{% content-ref url="/pages/-M0IzFX1cY6f\_XkJZ\_1A" %}
[Data Viewer Grid Component](/app-design/ui-components/data-components/data-viewers/data-viewer-grid.md)
{% endcontent-ref %}

<div align="left"><img src="/files/P91gWGF3QcIvsOQhKvbK" alt="Example of a data viewer grid." width="375"></div>

## Custom Data Viewer

Thunkable provides various default [data viewer list](/app-design/ui-components/data-components/data-viewers/data-viewer-list.md) and [data viewer grid](/app-design/ui-components/data-components/data-viewers/data-viewer-grid.md) 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="/pages/DOmCjY3hiv2fGGVXXaJ3" %}
[Custom Data Viewer](/app-design/ui-components/data-components/data-viewers/custom-data-viewer.md)
{% 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="/pages/-M5aL5rLKzPYplRcYGE5" %}
[Data Sources](/getting-started/data-sources.md)
{% 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="/pages/qsE75UbrqDiw4ZpStagv" %}
[Data Sources Blocks](/blocks/app-features/data-sources-blocks.md)
{% endcontent-ref %}