# Create a table

Here, we'll walk you through an example for how to create and configure a table element. For information about the table element and more general instructions on how to add/hide columns, visit [table](https://docs.acho.io/app-builder/app-construction/elements/table-and-chart/table "mention"). 

The table that we will be recreating in this tutorial is the table for our data validation app. We'll show you how to prepare your data and configure the table, including adding a column of checkboxes, displaying images, constructing columns with multiple pieces of information, adding currency symbols such as "$" or "%", and creating columns that only display values.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FHHsCaPXKCU8C8N66XR03%2Fimage.png?alt=media&#x26;token=94cd9122-61aa-4043-afed-28ce862a10fd" alt=""><figcaption></figcaption></figure>

## Prepare your data

In this tutorial, we will use a sample Shopify products dataset to build the table, 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](https://docs.acho.io/acho-studio/resources/add-a-resource).&#x20;

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FZ5R3LSBUvUc0zsqT537y%2Fupload_resource.gif?alt=media&#x26;token=c873b767-4764-4fd1-8442-d75181903ca4" alt=""><figcaption></figcaption></figure>

## Create an app

[Create an app](https://docs.acho.io/get-started#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 table element onto page

To add a table to your page, go to **Create -> Elements  -> Table** and drag it onto the page.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FPE4UrcDjqe47Ynon9eXD%2Fdrag-a-table.gif?alt=media&#x26;token=03946acb-bbd8-4d7c-8374-05cec5a62c0e" alt=""><figcaption></figcaption></figure>

### Configure your table

Select the table and navigate to **Property** located at the right configuration panel. Select the [**Table Node**](https://docs.acho.io/app-builder/app-construction/table) of your data from the **Data source** dropdown menu.&#x20;

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FCHyUYxc8Jy383CcxeIhL%2Fproperty.jpg?alt=media&#x26;token=61258f7b-5abd-4961-90d0-9c4d045d6b8e" alt="" width="346"><figcaption></figcaption></figure>

If you'd like, there are additional styling options, including header and row sizes, you can change below. See [table](https://docs.acho.io/app-builder/app-construction/elements/table-and-chart/table "mention") for more on these options.

The next step is to build your columns. By default, the table will display all columns with no styling, similar to the data node preview we saw from step 1.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FdnUMsB8a9VY5SHjy6rJ8%2Fimage.png?alt=media&#x26;token=be5934c8-96be-4b90-970f-a4147ab47890" alt=""><figcaption></figcaption></figure>

#### Configure columns

To configure each displayed column, we can build them individually by adding columns under Config -> Property. To add a column, click on the <img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FSlyGvLTxkHMnYlUrvDF6%2Fimage.png?alt=media&#x26;token=e7e6019d-e053-4964-9f85-d42db093978a" alt="" data-size="line"> under Columns. Then, we'll build our table column by column.

The key of a column setting will be the name of a column in your data node that will be replaced by your configuration. The title will be the displayed header on your table.

1. **Hide and arrange columns:**\
   Drag the columns to rearrange them and click <img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FjCCDkPDiukKzlrrrl323%2Fimage.png?alt=media&#x26;token=ac134311-2bb5-4a25-af0a-b40891cc5e56" alt="" data-size="line">to hide those columns that you don't want to present.<br>

   <figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FvwjBvNuQuFenFougyBSo%2Frename-hide-columns.gif?alt=media&#x26;token=65e18e08-1fbe-4fa6-a60e-d3748dac203d" alt=""><figcaption></figcaption></figure>
2. **Rename Columns:**\
   Click on columns to rename the title of the column\
   ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FWFpJtX0NYEY45AF7DkyF%2Fimage.png?alt=media\&token=c9a156a1-360b-467b-b576-aa6361b6329d)
3. **Edit column elements**\
   If you want to display more than a text of the table value, click the <img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FjCCDkPDiukKzlrrrl323%2Fimage.png?alt=media&#x26;token=ac134311-2bb5-4a25-af0a-b40891cc5e56" alt="" data-size="line">icon on the table level to enter <img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FkooXfSgoyftLYZaRapWb%2Fimage.png?alt=media&#x26;token=f3b1c021-286f-458f-9cdb-d9fa034316af" alt="" data-size="line">editing mode from preview. Then you will need to use [accessor](https://docs.acho.io/app-builder/app-construction/accessors)[s](https://docs.acho.io/app-builder/app-construction/accessors) to access the value of the cell. For example, drag an image element in the product\_image cell, and set its url to `${$value}` , the product\_image column will display the images of the product.<br>

   <figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FD8A2pRQOJeEnBkgP85Jr%2Fcol-images.gif?alt=media&#x26;token=46e0bd4b-a268-4b41-a2a9-f144013eefed" alt=""><figcaption><p>Drag an image element in the product_image cell</p></figcaption></figure>
4. **Use multiple columns value in one cell**\
   Additionally, you can access values from other columns, such as 'product\_name', by using <mark style="color:red;">`${$row.product_name}`</mark>.Similarly, <mark style="color:green;">`${}`</mark> tells the system that you are using an [accessor](https://docs.acho.io/app-builder/app-construction/accessors) to access data. <mark style="color:red;">`$row.product_name`</mark> means to extract the value of the <mark style="color:red;">`product_name`</mark> key in each row.\
   ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FtlpOfHspWN4HvW5bKzp2%2Fimage.png?alt=media\&token=2c495235-0107-424f-8a27-75193e8ea9d8)![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FNNpVQF4oxrISyAZ1lGaJ%2Fimage.png?alt=media\&token=b03a171f-acda-4028-836f-dc17eb41c0b4)\
   Use containers to arrange the elements.
5. **Price, Stock, Promotion:** These columns have a simple configuration since they display their value without including data from other columns.\
   ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FBY3SR48slM3y9fMbFhY2%2Fimage.png?alt=media\&token=52589a46-d984-444b-aa87-01e60a7288d4)\
   Their values are accessed with <mark style="color:red;">`${$value}`</mark>. To add certain format, we can add a separate "$" before the<mark style="color:red;">`${$value}`</mark> for price, and a "%" after the <mark style="color:red;">`${$value}`</mark> for promotion value. \
   \
   ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FrBU4qwwerklib2xjRMN3%2Fimage.png?alt=media\&token=4556b781-c20e-49bc-a47c-4e7ae4910478)![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FMccYFrcWsT7oJTcbxR9c%2Fimage.png?alt=media\&token=51f6cab6-68cf-4825-892d-9d0371ae03d9)<br>

### Set your table style

Set the size of your table under **Config -> CSS -> Size**.

Set the header color under **Config -> Element Styles -> Header Background Color**

![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FCIKAqwkryT4UNHbthOZ1%2Fimage.png?alt=media\&token=a87a5cb3-b29a-431e-92b6-02837f9bc5fe)![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FEG16smfsrCrOJKrsYIn8%2Fimage.png?alt=media\&token=ba0a5cd9-b0d5-4980-b65a-f9a4931d9cd5)

This is what our final table will look like:

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FcQGoel3rbsFlGTRnCadJ%2Fimage.png?alt=media&#x26;token=0cc59f45-c01f-48de-9383-af0ea11184fe" alt=""><figcaption></figcaption></figure>