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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.thunkable.com/snap-to-place/custom-data-viewer-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.