Custom Data Viewer
Last updated
Last updated
Thunkable provides various default data viewer list and data viewer grid templates, but saving a customized layout component as a data viewer allows you to display your data in a way that reflects your brand design and preferences.
In this tutorial, we’ll show you how to customize a Thunkable data viewer so you can display your data in a way that meets your user’s needs and reflects your brand design.
When you're happy with the layout you have customized, ensure it is selected in the component tree.
Click the vertical ellipsis next to the layout's name in the properties panel.
Select Save as Data Viewer Layout.
Give your data viewer layout a detailed name.
Select the Layout Type you want to create. - List for a data viewer list - Grid for a data viewer grid
Click OK.
A custom data viewer is designed to view data. It is not intended to receive user inputs. As such, we recommend that input components such as the text input and button, for example, are not included in a custom data viewer layout.
Click the Create New Screen icon at the top of the component tree in the Designer.
Drag a Data Viewer List or Data Viewer Grid component onto your screen.
Reposition and resize as necessary.
Connect your project to a data source. See here for instructions on connecting a data source: Data Sources.
Click the sample template to access the data viewer templates available to you.
Click to select the layout you saved as a data viewer from the bottom of the template library.
Map your data source columns to components within your custom data viewer layout.
Custom data viewers are created using Thunkable’s layout component, which allow for more precise positioning of UI components on an app screen.
Layout ComponentBy 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 Blocks
