# Create a list

The [**List**](/app-builder/app-construction/elements/layout-elements/list.md) element is another valuable tool for presenting elements that follow a common pattern. It is to turn data into a more flexible format instead of a tabular format. Compared to [**Table**](/app-builder/app-construction/elements/table-and-chart/table.md), **Lists** offer the advantage of creating a more dynamic user interface through CSS techniques such as Flex and Grid. The list element digests an JSON array and convert the array to a list of elements with the same pattern.

![](/files/wVl6PCHrpVYgoHuveIMK)

## Prepare your data

In this tutorial, we will use a sample Shopify products dataset to build the list, you can download the data [here](https://storage.googleapis.com/acho-prod-assets/acho-website-assets/live_demo/sample_products.csv) and [add it to resource](/acho-studio/resources/add-a-resource.md). 

<figure><img src="/files/q4ZQvP9CaoxKJvESCZop" alt=""><figcaption></figcaption></figure>

## Create an app

[Create an app](https://docs.acho.io/app-builder/popular-use-cases/pages/pQtQTJTksAVpD2MpwPqG#3.-create-a-blank-app-or-build-with-a-template.) if you don't have one, or go to the app that you want to add a table

### Drag list element onto page

To add a text to your page, find  **Elements -> List** and drag it onto the page.

### Add elements into list

Make sure the list is on editing mode, then drag a **Text** element into the list and type <mark style="color:red;">`${$item.product_name}`</mark> .  <mark style="color:green;">`${}`</mark> tells the system that you are using an [accessor](/app-builder/app-construction/accessors.md) to access data. <mark style="color:red;">`$item.product_name`</mark> means to extract the value of the <mark style="color:red;">`product_name`</mark> key in each JSON object.

<figure><img src="/files/m6BobRKaUnn8CMwYcZuV" alt=""><figcaption></figcaption></figure>

Similarly, add another text and an image into the list, use <mark style="color:red;">`${$item.image_url}`</mark> as the image url and <mark style="color:red;">`${$item.stock}`</mark> for the text. Use container to control the layout

Click the **Preview** button to see the result. As you can see, all the values in your data are shown on the page. &#x20;

![](/files/IlLekH7UySDrUIwyoLvk)

### Use CSS to control list layout

Select the list element and try setting the layout to either "Display: `Flex`" with a direction of "`Row`," or "Display: `Grid`" with columns set to "`1fr 1fr 1fr`"

<figure><img src="/files/a0C6DJB7zGxjNP1Mtqn8" alt="" width="375"><figcaption><p>Flex + Row</p></figcaption></figure>

<figure><img src="/files/yYCDC1T3MXZtbDnHkFA9" alt="" width="375"><figcaption><p>Gird + 1fr 1fr 1fr</p></figcaption></figure>


---

# 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.acho.io/app-builder/popular-use-cases/create-a-list.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.