> For the complete documentation index, see [llms.txt](https://docs.thunkable.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.thunkable.com/snap-to-place/custom-data-viewer-layout.md).

# Custom Data Viewer Layout

## Overview

While the [Data Viewer List](/snap-to-place/data-viewer-list.md) and [Data Viewer Grid](/snap-to-place/data-viewer-grid.md) have different layout options, you may want to design a custom layout for your data. This can be achieved with [Row](/snap-to-place/row.md) and [Column](/snap-to-place/column.md) components.

## Video Tutorial

{% embed url="<https://youtu.be/UIZtLgELGyk>" %}

## How To Use a Custom Layout in Your App

### Design your Custom Layout

Use a [Row](/snap-to-place/row.md) or [Column](/snap-to-place/column.md) to create the custom layout you want. We will refer to this as the 'Parent Row/Column' for the rest of this doc.&#x20;

This layout is a Row that contains two Columns. The first Column contains 3 [Labels](/snap-to-place/label.md): **TitleLabel**, **DescriptionLabel**, and **PriceLabel**. The second Column contains an [Image](/snap-to-place/image-1.md), **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 %}

![](/files/-MHGFlnypm0YOKWjI4yB)

### Save your Custom Layout

Select your Parent Row/Column and click the 'Save as Data Viewer Layout' button.

![](/files/-MHAvKHH1rUr0qA2WCGP)

#### Basic

When you click **Save as Data Viewer Layout**, you will see the following dialog:

![](/files/-MHAvB5swFuti62D5_Oy)

To save a basic Data Viewer Layout:

* Enter a **Layout Name**
* Select if your **Layout Type** is **List** or **Grid**

![](/files/-MHAvoefoK-DFVKZ4IIq)

* 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.

![](/files/-MHGDUdYAVGmYKuN4V68)

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.

![](/files/-MHGDYuDM8D8hiNi8kdw)

### 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](/snap-to-place/data-viewer-list.md). If it was saved with the Layout Type Grid, it can be used with the [Data Viewer Grid](/snap-to-place/data-viewer-grid.md).

![](/files/-MHGDcBtRX52m9TLKl2y)

### Bind Your Data to Your Custom Layout

You can bind the properties of your data to a [Data Source](/snap-to-place/data-sources.md).

#### Basic

With Basic Data Binding, Thunkable will automatically select basic properties of your components to bind to values in your data source.

![](/files/-MHGDoTTo1t0QDhEU4E3)

#### Advanced

With Advanced Data Binding, Thunkable will allow you to bind the properties that you specified to your data source:

![](/files/-MHGDwUZxHYhvpgW_p-H)

## 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.

![](/files/tvB0uRbdjgsnSMj8fX1a)