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