> 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-viewer-list.md). # Data Viewer List ## Overview The Data Viewer List lets you connect to a Data Source and view your data as a list.
Example of a Data viewer List. Data is dummy data from Webflow.
## Properties ### Data Viewer List | Property | Description | Data Type | | ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | | Data Source | The [Data Source](/~/revisions/A81b2aVlSXGVVaRtdFDr/data-sources.md#add-a-data-source-to-your-app) your data is to be pulled from | References chosen data source | | Table | Table from your Data Source to show data from | Reference to chosen table in Data Source | | Row Appearance | How your data will be displayed in your app | Select from list | | Populate Data | Select what items of data from your Data Source to show in which aspects of your layout | Select from lists | | Left Swipe | 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` | True/False | | Left Swipe Button Text | Text of Button visible when user swipes list item to the left | Text | | Left Swipe Button Text Color | Text Color of Button visible when user swipes list item to the left | Color | | Left Swipe Button Background Color | Background Color of Button visible when user swipes list item to the left | Color | | Right Swipe | 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` | True/False | | Right Swipe Button Text | Text of Button visible when user swipes list item to the right | Text | | Right Swipe Button Text Color | Text Color of Button visible when user swipes list item to the right | Color | | Right Swipe Button Background Color | Background Color of Button visible when user swipes list item to the right | Color | | Empty Text | Text that will be displayed if there is no data to fill a string in your Data Viewer | Text | ### Layout | Property | Description | Data Type | | ----------- | ----------------------------------------------------------------------------------- | -------------------------------------------- | | X | Location of top left corner of component on X-axis, where the left hand side is X=0 | Number | | Y | Location of top left corner of component on Y-axis, where the top side is Y=0 | Number | | Height | Height of component in pixels | Number | | Width | Width of component in pixels | Number | | Resize Mode | Define dimensions of the Data Viewer List component/container | Select from list `[Stretch, Float in Place]` | ## Blocks ### Events #### Click The Item Click event is fired when any list item in the Data Viewer is clicked. It returns a `row id` which corresponds to the unique Thunkable Id of the item that was clicked. The row id is most useful when used with the the Data Source blocks. ![](/files/-M5WAGUpG6FaD61ZNbIQ) #### Swipe Click The left and right swipe click events are fired when these buttons are clicked. Both return a `row id` to quickly identify which row was clicked when using the Data Source blocks ![](/files/-M5WAJZMT_IwmKVCBvPX) ![](/files/-M5WANMmneJEM8zLbmU-) ### Functions #### Refresh Refresh the Data Viewer List to sync with the Data Source. ![](/files/-MHGwoDnjb7WUltlwNZp) ### Properties Set and get [properties](#properties) of the Data Viewer List. #### Computed Height & Width Get the computed Height and Width of the Data Viewer List as it appears on-screen. #### Visible Set and get the Visible property of the Data Viewer List #### Empty Text Set and get the Empty Text property of the Data Viewer List ### Data Sources When you connect a Data Source to your project you will also have access to a second block drawer. These Data Source blocks allow you to perform a variety of CRUD (**C**reate, **R**ead, **U**pdate, **D**elete) operations on your data. Click on the link below to learn how to use the Data Sources blocks in your project. {% content-ref url="/pages/-M5aL5rLKzPYplRcYGE5" %} [Data Sources](/~/revisions/A81b2aVlSXGVVaRtdFDr/data-sources.md) {% endcontent-ref %}