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.

Properties

Data Viewer List

Property	Value	Description
Data Source	References chosen data source	The data source your data is pulled from.
Table	References chosen table in data source	The table within your data source your data is pulled from.
Row Appearance	Select from list	How your data will be displayed in your app.
Populate Data	Select from lists	Map your data source's columns to the fields they will be displayed in.
Left Swipe	True/False	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.
Left Swipe Button Text	Text	Text of left swipe button when a user swipes list item to the left.
Left Swipe Button Text Color	Color	Text color of left swipe button when a user swipes list item to the left.
Left Swipe Button Background Color	Color	Background color of left swipe button when a user swipes list item to the left.
Right Swipe	True/False	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.
Right Swipe Button Text	Text	Text of right swipe button when a user swipes list item to the right.
Right Swipe Button Text Color	Color	Text color of right swipe button when a user swipes list item to the right.
Right Swipe Button Background Color	Color	Background color of right swipe button when a user swipes list item to the right.
Empty text	Text	Text that will be displayed if there is no data in your data source to fill a data viewer field.

Layout

Property	Value	Description
X	coordinate value	Location of the top left corner of the data viewer list on the X-axis, where the left-hand side is X=0.
Y	coordinate value	Location of the top left corner of the data viewer list on the Y-axis, where the top side is Y=0.
Height	number in pixels	Height of the data viewer list in pixels.
Width	number in pixels	Width of the data viewer list in pixels.
Resize Mode	Stretch	Stretches the data viewer list to fit the dimensions of the device's screen.
Resize Mode	Float in Place	Renders the data viewer list in the same aspect ratio as the design, regardless of the device size.

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.

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.

Block: In Data Viewer List Call Refresh Data

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

Block: Properties

Set and get 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:

pageData Viewer Grid ComponentpageCustom Data Viewer

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.

pageData Sources Blocks

---

Have feedback on this doc? Please take a moment to share your feedback here: Thunkable Docs Feedback. Your valuable insights will help us improve and better serve you in the future.