# Table

You can use a table element to customize how you present a table from a data source (**Table**, **Metric** or **Query**).

{% hint style="info" %}
See [Create a table](/app-builder/popular-use-cases/create-a-table.md) for a detailed tutorial
{% endhint %}

## Properties

<div align="left"><figure><img src="/files/BvCr8i67rVW4rCcDBnEa" alt="" width="290"><figcaption></figcaption></figure></div>

**Data source:** Select a data source to display its data.

**Columns:** Columns to display in the table.

## Populating the table

When you select a data source for the table element, the entire data table will be displayed by default. You can use the blue template area to set configurations that will apply to all columns.

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

You can further modify your table by customizing the structure of each individual column under Config -> Property

## Hide a column

To customize a column, click on <img src="/files/W75ufRV5iMunLCDfzGdd" alt="" data-size="line">under Columns.

![](/files/NLF1CzRzOxlTaYAIIoVW)

Click on the new column, which will open up its configuration.

<div align="left"><figure><img src="/files/NZFp2tVr00tyCIQESMY4" alt="" width="326"><figcaption></figcaption></figure></div>

**Name:** Display name of the column.

**Key:** Name of the column in your data.&#x20;

**Width:** Width of the column in pixels.

**Pinned:** Set whether the column will be fixed to the left, right, or not fixed.

**Fixed Height**: Toggle off to allow automated height that fit the cell content

**Sort**:  Add a sort button on the column header. When user click sort buttons, event '**Sort Changed**' will be triggered. Add interaction on the table to enable the event triggers data source sort.

**Hide:** To hide a column, click on the ![](/files/kYZOJQvnYLH6mCOP0Icx) symbol.

To re-order the columns, click and drag on the 6 dots on the left of the column.

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

When a new column is added, a new field will appear in your table element for you to configure the column.

Use `${$value}` to access values for that column’s key. Use `${$row.column}` to access values for that row from other columns in your data.

In the above example, the Product column will display both the id and name of the product, while the Stock column will contain the stock number.

## Element Styles

**Header and data background color:** Background color for the header row and data rows.

**Header and data color:** Color for the header row and data rows.

**Hover background color:** Color for when user hovers over row.

**Border color:** Color of the table border.

**Border width:** Width of the table border in pixels.

**Stripe:** Toggle on to display a stripe table

**Vertical Border:** Toggle on to display vertical grid borders

**Empty text:** Text that will be shown when the table has no data to display.

![](/files/My2oUG35bR43S0YAabZ6)

**Header Spacing and Cell Spacing:** Set padding for header and data cells.

See [Tooltip](/app-builder/app-construction/elements/tooltip.md) for tooltip configurations.

## Supported Events

**Row Click:** Triggered when user clicks on a row.

* You’ll be able to use the values in the clicked row. They’re stored in an object called `rowData` in the event payload. To access a value, use `${event.rowData.column}`. See [Event payload](/app-builder/app-construction/interactions/event-payload.md) for more.

Sort Change:&#x20;

## Supported Actions

**Set Table Data:** Set data for the table with an array of JSONs.

**Set Data:** Change element data. See [Data Store](/app-builder/app-construction/data-store.md).

**Set Loading:** Set loading animation. See [Set loading animations](/app-builder/popular-use-cases/set-loading-animations.md).

{% hint style="info" %}
Visit [Interactions](/app-builder/app-construction/interactions.md) for more on events and actions.
{% endhint %}


---

# 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/app-construction/elements/table-and-chart/table.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.