> For the complete documentation index, see [llms.txt](https://docs.acho.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.acho.io/app-builder/popular-use-cases/create-a-list.md).

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