# Custom Data Viewer Layout ## Overview While the [Data Viewer List](https://docs.thunkable.com/snap-to-place/data-viewer-list) and [Data Viewer Grid](https://docs.thunkable.com/snap-to-place/data-viewer-grid) have different layout options, you may want to design a custom layout for your data. This can be achieved with [Row](https://docs.thunkable.com/snap-to-place/row) and [Column](https://docs.thunkable.com/snap-to-place/column) components. ## Video Tutorial {% embed url="" %} ## How To Use a Custom Layout in Your App ### Design your Custom Layout Use a [Row](https://docs.thunkable.com/snap-to-place/row) or [Column](https://docs.thunkable.com/snap-to-place/column) to create the custom layout you want. We will refer to this as the 'Parent Row/Column' for the rest of this doc. This layout is a Row that contains two Columns. The first Column contains 3 [Labels](https://docs.thunkable.com/snap-to-place/label): **TitleLabel**, **DescriptionLabel**, and **PriceLabel**. The second Column contains an [Image](https://docs.thunkable.com/snap-to-place/image-1), **ProductImage**, and a Rating, called **ProductRating**. These components will be referenced in subsequent screenshots in this document. {% hint style="info" %} If you want to set the height or width of your parent row/column to fill the container, we recommend setting it to **Relative Size - 100%** for best results. {% endhint %} ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MHGAc280ok88AnMvtCe%2F-MHGFlnypm0YOKWjI4yB%2Finitial%20layout.png?alt=media\&token=31a4ec1d-4179-40ab-baae-f633c767c848) ### Save your Custom Layout Select your Parent Row/Column and click the 'Save as Data Viewer Layout' button. ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MHAsCIXn3wyeAT9pkOT%2F-MHAvKHH1rUr0qA2WCGP%2Fsave%20as%20DV%20layout.png?alt=media\&token=0ff8e008-6909-4c7f-9232-d436d202d7a0) #### Basic When you click **Save as Data Viewer Layout**, you will see the following dialog: ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MHAsCIXn3wyeAT9pkOT%2F-MHAvB5swFuti62D5_Oy%2FScreen%20Shot%202020-09-14%20at%2010.20.08%20AM.png?alt=media\&token=e358b809-7b76-4d6d-8d16-b84a07fa9bd0) To save a basic Data Viewer Layout: * Enter a **Layout Name** * Select if your **Layout Type** is **List** or **Grid** ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MHAsCIXn3wyeAT9pkOT%2F-MHAvoefoK-DFVKZ4IIq%2FScreen%20Shot%202020-09-14%20at%2010.20.14%20AM.png?alt=media\&token=5f174fc7-c90e-482b-b201-eaa912431f9e) * Let **Advanced Binding** be set to **false** * Click **OK** #### Advanced To save an advanced Data Viewer Layout: * Enter a **Layout Name** * Select if your **Layout Type** is **List** or **Grid** * Set **Advanced Binding** to **true** You can now select which properties of the components in your Parents Row/Column you want to bind to the values in your Data Source. ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MHGAc280ok88AnMvtCe%2F-MHGDUdYAVGmYKuN4V68%2Fselectprops.png?alt=media\&token=7c164d5c-d56a-4412-97a5-1617799b9c6c) Once you have selected all of the properties that you want bound to the values in your Data Source, click **OK** to save your custom Data Viewer layout. ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MHGAc280ok88AnMvtCe%2F-MHGDYuDM8D8hiNi8kdw%2Fboundprops.png?alt=media\&token=06348d7e-571f-4632-af02-63b76fdc8622) ### Use Your Custom Layout Once you have saved your custom layout, you can select it as a layout for your Data Viewer. If your layout was saved with the Layout Type List, it can be used with the [Data Viewer List](https://docs.thunkable.com/snap-to-place/data-viewer-list). If it was saved with the Layout Type Grid, it can be used with the [Data Viewer Grid](https://docs.thunkable.com/snap-to-place/data-viewer-grid). ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MHGAc280ok88AnMvtCe%2F-MHGDcBtRX52m9TLKl2y%2Fselect%20custom%20layout.png?alt=media\&token=035938c5-83a5-4d52-85a9-ca78e8d007cb) ### Bind Your Data to Your Custom Layout You can bind the properties of your data to a [Data Source](https://docs.thunkable.com/snap-to-place/data-sources). #### Basic With Basic Data Binding, Thunkable will automatically select basic properties of your components to bind to values in your data source. ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MHGAc280ok88AnMvtCe%2F-MHGDoTTo1t0QDhEU4E3%2Fsimple%20binding.png?alt=media\&token=0dfb2ad0-e05d-403e-b863-ec8cd8b7b5cf) #### Advanced With Advanced Data Binding, Thunkable will allow you to bind the properties that you specified to your data source: ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MHGAc280ok88AnMvtCe%2F-MHGDwUZxHYhvpgW_p-H%2Fadvanced%20binding.png?alt=media\&token=d4ca148f-16eb-4c16-91e0-0b5e21117115) ## Managing your Custom Data Viewer Layouts You can manage your custom data layouts by going to your Thunkable homepage at [x.thunkable.com/projects](https://x.thunkable.com/projects) and clicking on the **Data Viewer Layouts** tab at the left of the page. From here, you can edit and delete your custom data layouts. ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUe3rgJfvQYLrpDR1HfWv%2Fuploads%2Fbfln2qDrCbZO4sGUy7NM%2FScreenshot%202024-10-03%20at%208.01.11%20PM.png?alt=media\&token=f176a38e-e0a0-47d6-acd2-79f7653770c1)