# 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](https://docs.thunkable.com/~/revisions/A81b2aVlSXGVVaRtdFDr/data-sources#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. ![](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\&token=01b87975-1117-4bf4-8071-d00b2342e7e9) #### 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 ![](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\&token=9dfdd9f3-85b8-4382-b232-5c89564a1fe6) ![](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\&token=297822c1-3d91-49cc-ba13-6249babf1c23) ### Functions #### Refresh Refresh the Data Viewer List to sync with the Data Source. ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MHGpTNkuzfTrsA7fYFG%2F-MHGwoDnjb7WUltlwNZp%2Fdvl_refresh.png?alt=media\&token=455c7045-3a38-404a-88f4-67ed543958c4) ### 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="data-sources" %} [data-sources](https://docs.thunkable.com/~/revisions/A81b2aVlSXGVVaRtdFDr/data-sources) {% endcontent-ref %}