Table

The Table element allows you to display repeated fields and hidden fields in an organized layout.

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

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

Tables handle repeated fields automatically. If using hidden fields, make sure to use an array value to render each cell correctly.

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.

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.

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> 

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, fields, and (optionally) container repeat logic. This method is more customizable than the table element and allows you to display fields and elements inside of cells.

An example of a simple table built on Feathery