# Data Viewer List Component

## Overview

The data viewer components act as a display layer for the data in a connected data source. The data viewer list displays your data as a list.

<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="" width="375"></div>

## Properties

### Data Viewer List

<table><thead><tr><th width="229">Property</th><th width="184.33333333333331">Value</th><th>Description</th><th data-hidden>Description</th></tr></thead><tbody><tr><td>Data Source</td><td>References chosen data source</td><td>The <a href="../../../../getting-started/data-sources">data source</a> your data is pulled from.</td><td>The <a href="../../../../getting-started/data-sources">data source</a> your data is to be pulled from.</td></tr><tr><td>Table</td><td>References chosen table in data source</td><td>The table within your data source your data is pulled from.</td><td>Selected table from your data source.</td></tr><tr><td>Filter View</td><td>References filter view in table</td><td>The filter view within your table your data is pulled from.</td><td></td></tr><tr><td>Row Appearance</td><td>Select from list</td><td>How your data will be displayed in your app.</td><td>How your data will be displayed in your app.</td></tr><tr><td>Populate Data</td><td>Select from lists</td><td>Map your data source's columns to the fields they will be displayed in.</td><td>Match the data source items with the fields of the selected row appearance.</td></tr><tr><td>Left Swipe</td><td>True/False</td><td>Toggle whether your end user can swipe a list item to the left to view an additional button. Reveals left swipe button settings if set to true.</td><td>Toggle whether your end user can swipe a list item to the left to view an additional button. Reveals left swipe button settings if set to true.</td></tr><tr><td>Left Swipe Button Text</td><td>Text</td><td>Text of left swipe button when a user swipes list item to the left.</td><td>Button text when a user swipes a list item to the left.</td></tr><tr><td>Left Swipe Button Text Color</td><td>Color</td><td>Text color of left swipe button when a user swipes list item to the left.</td><td>Button text color when a user swipes a list item to the left.</td></tr><tr><td>Left Swipe Button Background Color</td><td>Color</td><td>Background color of left swipe button when a user swipes list item to the left.</td><td>Background color when a user swipes a list item to the left.</td></tr><tr><td>Right Swipe</td><td>True/False</td><td>Toggle whether your end user can swipe a list item to the right to view an additional button. Reveals right swipe button settings if set to true.</td><td>Toggle whether your end user can swipe a list item to the right to view an additional button. Reveals right swipe button settings if set to true.</td></tr><tr><td>Right Swipe Button Text</td><td>Text</td><td>Text of right swipe button when a user swipes list item to the right.</td><td>Button text when a user swipes a list item to the right.</td></tr><tr><td>Right Swipe Button Text Color</td><td>Color</td><td>Text color of right swipe button when a user swipes list item to the right.</td><td>Button text color when a user swipes a list item to the right.</td></tr><tr><td>Right Swipe Button Background Color</td><td>Color</td><td>Background color of right swipe button when a user swipes list item to the right.</td><td>Background color when a user swipes a list item to the right.</td></tr><tr><td>Empty text</td><td>Text</td><td>Text that will be displayed if there is no data in your data source to fill a data viewer field.</td><td>Text that is displayed if there is no data to fill a string in your data viewer.</td></tr></tbody></table>

### Layout

<table><thead><tr><th width="168.33333333333331">Property</th><th width="189">Value</th><th>Description</th><th data-hidden>Description</th></tr></thead><tbody><tr><td>X</td><td>coordinate value</td><td>Location of the top left corner of the data viewer list on the X-axis, where the left-hand side is X=0.</td><td>Position of the upper left corner of the data viewer list on the X-axis, where the left side of the screen is X=0.</td></tr><tr><td>Y</td><td>coordinate value</td><td>Location of the top left corner of the data viewer list on the Y-axis, where the top side is Y=0.</td><td>Position of the upper left corner of the data viewer list on the Y-axis, where the top of the screen is Y=0.</td></tr><tr><td>Height</td><td>number in pixels</td><td>Height of the data viewer list in pixels.</td><td>The data viewer list's height is defined by a custom number of pixels.</td></tr><tr><td>Width</td><td>number in pixels</td><td>Width of the data viewer list in pixels.</td><td>The data viewer list's width is defined by a custom number of pixels.</td></tr><tr><td>Resize Mode</td><td>Stretch</td><td>Stretches the data viewer list to fit the dimensions of the device's screen.</td><td>Stretches the data viewer list to fit the dimensions of the device's screen.</td></tr><tr><td>Resize Mode</td><td>Float in Place</td><td>Renders the data viewer list in the same aspect ratio as the design, regardless of the device size.</td><td>Renders the data viewer list in the same aspect ratio as the design, regardless of the device size.</td></tr></tbody></table>

## Blocks

### Block: When Data Viewer List Item Click

The "Item Click" event block is fired when any list item in the data viewer is clicked. It returns  "row id" which corresponds to the unique Thunkable row ID of the item that was clicked. The row id is most useful when used with the the [data source blocks](https://docs.thunkable.com/blocks/app-features/data-sources-blocks).

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5TUcYV8jP9gDC_CxOv%2F-M5WAGUpG6FaD61ZNbIQ%2Fitem_click.png?alt=media&#x26;token=01b87975-1117-4bf4-8071-d00b2342e7e9" alt="" width="563"></div>

### Block: When Data Viewer List Swipe Click

The left and right swipe click events are fired when these buttons are clicked. Both return a "row id" to identify which row was clicked when using the [data sources blocks](https://docs.thunkable.com/blocks/app-features/data-sources-blocks).

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5TUcYV8jP9gDC_CxOv%2F-M5WAJZMT_IwmKVCBvPX%2Fleft_swipe.png?alt=media&#x26;token=9dfdd9f3-85b8-4382-b232-5c89564a1fe6" alt="" width="563"></div>

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M5TUcYV8jP9gDC_CxOv%2F-M5WANMmneJEM8zLbmU-%2Fright_swipe.png?alt=media&#x26;token=297822c1-3d91-49cc-ba13-6249babf1c23" alt="" width="563"></div>

### Block: In Data Viewer List Call Refresh Data

Refresh the data viewer list to sync with the connected data source.

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MHGpTNkuzfTrsA7fYFG%2F-MHGwoDnjb7WUltlwNZp%2Fdvl_refresh.png?alt=media&#x26;token=455c7045-3a38-404a-88f4-67ed543958c4" alt="" width="563"></div>

### Block: Properties

Set and get [properties](#properties) of the data viewer list.

## Related Docs

### Data Viewer Components

If the data viewer list isn't the best layout to display your data, one of these other options may be more appropriate:&#x20;

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

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

### Data Sources Blocks

To access the data sources blocks, you must first connect a data source. Then, 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.&#x20;

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

***

{% 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 %}


---

# 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/data-viewer-list.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.