# Table

The `Table` element displays field data as columns in a table layout.

<figure><img src="https://640450274-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHAVngDAEk3s8Bw7P6Ntz%2Fuploads%2Fdirmy6iW5u5a3IL1hrY0%2Fimage.png?alt=media&#x26;token=1c48f3b2-ca62-4212-9a3d-a06477409999" alt=""><figcaption></figcaption></figure>

### Configuring Columns

Columns define what data is displayed in your table. Each column has:

* **Header**: The display name shown at the top of the column
* **Field Mapping**: The data field from your data source that populates this column

{% hint style="info" %}
Tables handle repeated fields automatically. If using hidden fields, make sure to use an array value to render each cell correctly.
{% endhint %}

### Configuring Actions

Actions are interactive buttons that appear at the end of each row, allowing users to perform operations on that row's data.

**To add/edit actions:**

1. Open the table's property panel
2. Navigate to the **Actions** section
3. Click "Add Action" to create a new action
4. Name your action (e.g., "View Details", "Edit", "Delete")
   1. This name is displayed to users and used to identify the action in code.

**Action Display Behavior:**

* **1 action**: Displayed as an individual button
* **2 or more actions**: Consolidated into an overflow menu (⋮) to save space

**Using Actions:**

See the Handling Row Click Events section below on instructions for using actions to run custom logic.

### Table Features

Enable or disable these features in the **Table Features** section:

* **Search Bar**: Adds a search input to filter table rows
* **Sort Options**: Allows users to sort columns by clicking column headers
* **Pagination**: Splits data across multiple pages with page controls

### Configuring Table Data

#### Repeated Fields

Tables work out of the box with repeated fields. Simply map your repeated field to the column and the table will display each value as a cell in a row.

#### API Connectors

Using the JSON mapping, you can map data to repeated fields and/or hidden fields. If you use the `*` notation, all data from the response will be added to the field value.

<figure><img src="https://640450274-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHAVngDAEk3s8Bw7P6Ntz%2Fuploads%2FJDvDlYt0r3fCB8hd1J2E%2Fimage.png?alt=media&#x26;token=95f5d9e8-8198-43f6-bab9-ba38ae31b635" alt=""><figcaption></figcaption></figure>

<figure><img src="https://640450274-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHAVngDAEk3s8Bw7P6Ntz%2Fuploads%2FVw8OZCZA6SxoRb9HcIM3%2Fimage.png?alt=media&#x26;token=904f9750-58d2-4a08-9047-8b139aa5e8dc" alt=""><figcaption></figcaption></figure>

#### Custom Logic

You can use custom logic rules to assign repeated fields or hidden fields values. If you assign a hidden field an array of strings, it will display on the table.

```
table_field.value = ["value 1", "value 2", "value 3"];
```

### Handling Action Events

When a user clicks an action button in a table row, you can capture that interaction and trigger custom logic using the `feathery.trigger` object.

#### Available Trigger Data

When a row action is clicked, the following data is added to `feathery.trigger`:

* **`rowIndex`**: The index of the clicked row (accounts for pagination)
* **`rowData`**: An object containing the data from the clicked row in `{column header: value}` format
* **`action`**: The name of the clicked action (if applicable)

#### Setting Up Logic Rules

1. Create a new Logic Rule with trigger type **"Element Click"**
2. Select your table element as the trigger element
3. Access the trigger data in your conditions or actions using:
   * `feathery.trigger.rowIndex`
   * `feathery.trigger.rowData`
   * `feathery.trigger.action`

### Advanced Usage

#### Row click events

You can trigger logic on row click by checking for the absence of `action` in `feathery.trigger` . If there is no action property, then the click was on the row and not an action button. Use this for step navigation or other use cases.

{% hint style="info" %}
If using row click actions, apply custom styling to the table to signify that the row is clickable to the user.\
\
Add the following custom html to a container on your step:

```
<style>
  tbody tr:hover {
    background-color: #e5e7eb;
    cursor: pointer;
  }
</style> 
```

{% endhint %}

#### Row Striping

Custom html can be used to add stripes to your rows:

```
<style>
  tbody tr:nth-child(even) {
    background-color: #f3f4f6;
  }
</style>
```

### Legacy Tables

It's possible to build your own table layout using a combination of [containers](https://docs.feathery.io/platform/build-forms/elements/basic/container), [fields](https://docs.feathery.io/platform/build-forms/elements/fields), and (optionally) [container repeat logic](https://docs.feathery.io/platform/build-forms/logic/dynamically-repeating-containers). This method is more customizable than the table element and allows you to display fields and elements inside of cells.

<figure><img src="https://640450274-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHAVngDAEk3s8Bw7P6Ntz%2Fuploads%2F97SUK2JL5th5wfZPTupp%2FScreenshot%202023-04-25%20at%205.12.57%20PM.png?alt=media&#x26;token=1dfc10df-c36e-427b-9b36-422ace7727fc" alt=""><figcaption><p>An example of a simple table built on Feathery</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.feathery.io/platform/build-forms/elements/basic/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.