Data Viewer Grid Component
Last updated
Last updated
The data viewer components act as a display layer for the data in a connected data source. The data viewer grid displays your data in a grid.
| 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. |
Filter View | References filter view in table | The filter view within your table your data is pulled from. |
Grid 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. |
Horizontal Scroll | True/False | True - data viewer scrolls horizontally False - data viewer scrolls vertically |
Empty text | Text | Text that will be displayed if there is no data in your data source to fill a data viewer field. |
| Property | Value | Description |
|---|---|---|
X | coordinate value | Location of the top left corner of the data viewer grid 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 grid on the Y-axis, where the top side is Y=0. |
Height | number in pixels | Height of the data viewer grid in pixels. |
Width | number in pixels | Width of the data viewer grid in pixels. |
Resize Mode | Stretch | Stretches the data viewer grid to fit the dimensions of the device's screen. |
Resize Mode | Float in Place | Renders the data viewer grid in the same aspect ratio as the design, regardless of the device size. |
The "Item Click" event block is fired when any grid 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.
Refresh the data viewer grid to sync with the connected data source.
Set and get properties of the data viewer grid.
If the data viewer grid isn't the best layout to display your data, one of these other options may be more appropriate:
Data Viewer List ComponentCustom Data ViewerTo 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.
Data Sources BlocksHave 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.
