> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/data-table.md).

# Data Table

Show Salesforce records on a flow screen, let users select, edit, filter and act on rows, then use the result in the next element of your screen flow.

The Avonni Data Table shows Salesforce records on a flow screen. Users sort, search, filter, select and edit rows there, and what they pick or change comes out as flow variables for the next element.

Salesforce's standard Data Table already shows a record collection, lets users select rows and edits some field types in place. Choose the Avonni Data Table when the screen needs more: rows grouped with a subtotal per group, row and header buttons that open another flow, filters and a search panel, export to Excel or CSV, or a table that runs its own query and reloads after a change.

{% hint style="warning" %}
**Turn on Lightning Web Security.** The Data Table loads faster and runs as intended in screen flows when [Lightning Web Security is enabled](https://developer.salesforce.com/docs/platform/lightning-components-security/guide/lws-enable.html) in your org.
{% endhint %}

***

## Tutorials

Each tutorial builds one real screen, step by step. Start with these four:

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Data Table 101: Learn the Basics</strong></td><td>Put an Avonni Data Table on a flow screen, feed it your open deals, label the columns, and use the rows the user ticks in the next flow element.</td><td><a href="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FXCfA0KwXVCMbLpTgZi2Z%2Fdata-table-tutorial-card-learn-the-basics.png?alt=media">data-table-tutorial-card-learn-the-basics.png</a></td><td><a href="/flow/tutorials/components/data-table/learn-the-basics.md">Learn the Basics</a></td></tr><tr><td><strong>Work with Selected Rows</strong></td><td>Let a sales manager tick up to three deals in a screen flow Data Table, require a pick, then reassign every selected deal with one Loop and Update Records.</td><td><a href="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FuenlGdjXpM5fUS4FtT4i%2Fdata-table-tutorial-card-work-with-selected-rows.png?alt=media">data-table-tutorial-card-work-with-selected-rows.png</a></td><td><a href="/flow/tutorials/components/data-table/work-with-selected-rows.md">Work with Selected Rows</a></td></tr><tr><td><strong>Column Types Gallery</strong></td><td>See every column type of the screen flow Data Table, from progress bars and star ratings to pickers and buttons, and pick the right one for each field.</td><td><a href="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FN1XhvvfTTfShKLOHN0lX%2Fdata-table-tutorial-card-column-types-gallery.png?alt=media">data-table-tutorial-card-column-types-gallery.png</a></td><td><a href="/flow/tutorials/components/data-table/column-types-gallery.md">Column Types Gallery</a></td></tr><tr><td><strong>Creating Row Actions</strong></td><td>Add a row menu, buttons and links to a screen flow Data Table, then open another flow, a record or the next screen with the row the user clicked.</td><td><a href="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FsohhKNGT6W3gk99MTGY8%2Fdata-table-tutorial-card-creating-row-actions.png?alt=media">data-table-tutorial-card-creating-row-actions.png</a></td><td><a href="/flow/tutorials/components/data-table/creating-row-actions.md">Creating Row Actions</a></td></tr></tbody></table>

All the Data Table tutorials, grouped by goal, are on the [Data Table tutorials](/flow/tutorials/components/data-table.md) page.

***

## Overview

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FUZoh99saLrKVeuxC7loq%2Fdata-table-tutorial-learn-the-basics-result.png?alt=media" alt="A flow screen with the Deals to review table: deal names as links, stage badges, amounts and close dates, two rows ticked and the line 2 items selected" width="700"><figcaption><p>A sales manager's screen: open deals, two of them ticked for a call this week.</p></figcaption></figure>

A sales manager opens a screen flow at the start of the week. The Data Table lists her team's open deals with the stage as a colored badge and the deal name as a link. She ticks the two deals she wants to call about, and the next element of the flow creates a follow-up task for each one.

Every Data Table screen works this way. Records come in from a Get Records element or from the table's own query, and what the user does with them comes out as output variables.

{% hint style="info" %}
**See it in a real project**

[Partner order desk](https://docs.avonnicomponents.com/projects/use-cases/portals-and-partner-sites/partner-order-desk): inline edit and PDF upload on a partner page.
{% endhint %}

***

## Configuration

Drag the Data Table onto a screen in Flow Builder, select it and click **Open Component Builder**. The **Edit Data Table Component** window opens: fields on the left, a live preview of the table in the middle, and the **Properties**, **Interactions** and **Style** tabs on the right. [Learn the Basics](/flow/tutorials/components/data-table/learn-the-basics.md) walks through a first table from start to finish.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FoatIbSGkSGfTUDwWR6hp%2Fdata-table-tutorial-dtref-builder-overview.png?alt=media" alt="The Edit Data Table Component window with numbered markers on the Fields tab, the toolbar buttons, the table preview and the Properties, Interactions and Style tabs"><figcaption><p>The Component Builder of the Data Table, with the eight areas described below.</p></figcaption></figure>

1. **Fields** and **Templates** tabs: drag a field onto the preview to add a column, or start from a template.
2. **Undo** and **Redo**.
3. **Full height**: the table takes the full height of the screen and loads more rows as the user scrolls.
4. **Pull To Boundary**: removes the outer spacing so the table reaches the edges of the screen.
5. **All Columns Settings**: turns Editable, Display as Input, Searchable, Filterable, Sortable, Wrap Text or Hide Default Actions on for every column at once.
6. **Copy** and **Paste**: copy this table's settings to another Data Table.
7. The table preview. Each column header has a chevron menu with the column settings. The [Data Table editor](/flow/tutorials/components/data-table/tips-and-tricks/data-table-editor.md) tutorial covers everything you can do from it.
8. The **Properties**, **Interactions** and **Style** tabs. The sections below follow the **Properties** tab.

### Data Source

The data source decides where the rows come from. A new Data Table starts on **Variable**.

| Data source                                                      | Where the rows come from                                                           | Use it when                                                                              |
| ---------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| [**Manual**](/flow/component-builder/data-sources/manual.md)     | Rows typed in the builder.                                                         | The list is short and fixed, for example a set of service tiers.                         |
| [**Variable**](/flow/component-builder/data-sources/variable.md) | A record collection variable of the flow, usually from a Get Records element.      | The flow already fetched the records, or another element builds the collection.          |
| [**Query**](/flow/component-builder/data-sources/query.md)       | The table queries the object itself, with its own filters, order and record limit. | You want fields from parent records, a reload after a change, or no Get Records element. |

Whatever the source, the table tells its rows apart with the **Key Field** (under **Data Mappings > Advanced Options**): the record `Id` unless you change it, and you should leave it there. Selection outputs, row actions and uploads return the key field value of the row, and so does the **Selected Record Ids** value an interaction can pass on.

With **Variable**, pick the collection in **Data Collection**. **Default Selection Collection**, right under it, takes a second collection whose rows start ticked.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FjSvwgrksdXz5035uVqHs%2Fdata-table-tutorial-learn-the-basics-builder.png?alt=media" alt="The Edit Data Table Component window: Data Collection set to Open Deals in the Fields tab, the column preview, and the Properties tab"><figcaption><p>Data Collection points the table at the flow's record collection.</p></figcaption></figure>

With **Query**, choose the object, add filters, an order and a maximum number of records. Filters can read flow variables such as `{!recordId}`.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fu2dPe0OYTASZjbm8kbvo%2Fdata-table-tutorial-dtref-query-source.png?alt=media" alt="The Query data source on Opportunity with a Stage filter, an Order By on Amount and four mapped columns including Account Name from the parent account" width="320"><figcaption><p>A Query source: object, filters, order and the mapped columns, including a field from the parent account.</p></figcaption></figure>

{% hint style="info" %}
Edits, uploads and the Save interaction need a record behind each row, so they work with **Variable** and **Query** only. **Refresh Query** is offered only with **Query**. [Query or Variable](/flow/component-builder/data-sources/query-vs-variable.md) compares the two.
{% endhint %}

<details>

<summary>Can I use the output collection of an action as the data source?</summary>

Yes, as long as the output is a collection of **records** (a record collection variable). The Data Table needs records to build its rows. In **Data Collection**, pick the output collection of the action that runs before the screen. To check what the action returns, run the flow in Debug and read the collection in the debug details.

</details>

### Data Mappings

**Data Mappings** connects fields to the table. With **Variable** or **Query**, it holds:

| Setting              | What it does                                                                                                                                      |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Columns**          | The columns of the table, in order. Click a column to open its settings (see [Customize Columns](#customize-columns)).                            |
| **Sort By**          | The column the table is sorted on when it loads.                                                                                                  |
| **Group By**         | The field that groups the rows (see [Group By](#group-by)).                                                                                       |
| **Filters**          | The fields users can filter on (see [Filter Data](#filter-data)).                                                                                 |
| **Search Fields**    | Extra fields the search box looks in (see [Search](#search)).                                                                                     |
| **Export To Fields** | The fields written to the file when users export (see [Setting up data export](/flow/tutorials/components/data-table/setting-up-data-export.md)). |
| **Key Field**        | Under **Advanced Options**. The field that identifies each row (see [Data Source](#data-source)). Leave it on `Id`.                               |

#### Setting Up Data Mappings

Add a column in one of two ways:

* Drag a field from the **Fields** tab onto the preview.
* Under **Columns**, click **Add Columns** and pick the fields.

Rename a column with the pencil beside its label in the preview, and drag columns in the list to reorder them.

#### Displaying Fields from Lookup Relationships

With **Query**, the field picker also lists the fields of parent records. Pick **Account > Account Name** on an Opportunity table to show the account of each deal, with no formula field. With **Variable**, the table shows only the fields the collection holds, and a Get Records element stores the fields of its own object, never those of a parent. To show a parent field, use **Query**, or add a formula field on the object (for example `Account.Name` in a text formula on Opportunity) and store that formula in the Get Records.

To make record names clickable, turn on **Linkify** on the column: [Displaying Record Name field as a link](/flow/tutorials/components/data-table/displaying-record-name-field-as-a-link.md).

### Properties

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FgCniHfgtY0hUNRDXYdrt%2Fdata-table-tutorial-dtref-properties.png?alt=media" alt="The Properties tab of the Data Table with the table toggles in builder order and the Advanced Options expanded" width="320"><figcaption><p>The table toggles, with Advanced Options open.</p></figcaption></figure>

The table toggles, in the order the **Properties** tab shows them:

| Setting                           | What it does                                                                                                              |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| **Hide Table Header**             | Hides the row of column labels.                                                                                           |
| **Hide Table Borders**            | Hides the table borders. Shows up once **Hide Table Header** is on.                                                       |
| **Wrap Table Header**             | Wraps long column labels on up to three lines instead of cutting them.                                                    |
| **Hide Checkbox Column**          | Removes the checkboxes, so rows cannot be selected.                                                                       |
| **Show Row Number Column**        | Numbers the rows in a first column. An editable column always shows row numbers, whatever this toggle says.               |
| **Row Number Offset**             | The number the row count starts from. Needs **Show Row Number Column**.                                                   |
| **Max Row Selection**             | The maximum number of rows a user can tick. At the limit, the other checkboxes are disabled.                              |
| **Rows Selection Disabled**       | The key field values (usually record Ids) of rows that cannot be ticked.                                                  |
| **Suppress Bottom Bar**           | Hides the Cancel and Save bar and saves each edited cell as soon as the user changes it, one save per cell.               |
| **Always Display Bottom Bar**     | Shows the Cancel and Save bar at all times, even before the first edit. Only one of the two bottom bar toggles can be on. |
| **Show Number of Items Selected** | Shows a line such as "3 items selected" with a link to clear the selection.                                               |
| **Read Only**                     | Turns off editing on every column.                                                                                        |
| **Required**                      | The user must tick at least one row before going to the next screen. The message reads "Please select minimum 1 row."     |

[Work with Selected Rows](/flow/tutorials/components/data-table/work-with-selected-rows.md) uses **Max Row Selection**, **Show Number of Items Selected** and **Required** on a real screen.

{% hint style="info" %}
**Pre-select rows.** Set the **Selected Rows Key Field Value** input to the key field values (usually record Ids) of the rows to tick when the screen loads. With **Variable**, you can also use **Default Selection Collection**.
{% endhint %}

On a phone, the table keeps its columns and scrolls sideways. For a small screen, show a simpler table with component visibility, or use the [List](/flow/flow-components/list.md) component, which stacks its content.

### Advanced Options

Click **Advanced Options** under the toggles to set a behavior on every column at once. The **All Columns Settings** menu of the toolbar does the same from the preview.

| Setting                          | What it does                                                                                                             |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| **All Columns Editable**         | Makes every column editable.                                                                                             |
| **All Columns Display as Input** | Shows every editable column as an input box, with no click needed.                                                       |
| **All Columns Filterable**       | Makes every column filterable.                                                                                           |
| **All Columns Searchable**       | Makes every column searchable.                                                                                           |
| **All Columns Sortable**         | Makes every column sortable.                                                                                             |
| **All Columns Wrappable**        | Wraps the text of every column.                                                                                          |
| **Hide Default Actions**         | Hides the built-in entries of the column header menus.                                                                   |
| **Max Row Edit and Selection**   | The maximum number of rows that can be selected or edited at once. A row that is both edited and selected counts as one. |

Set one limit, not both: **Max Row Selection** when users only tick rows, **Max Row Edit and Selection** when they tick and edit.

### Customize Columns

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FcDcohtFbpLLY8oENqv4F%2Fdata-table-tutorial-column-types-gallery-result.png?alt=media" alt="Data Table of open opportunities with linked names, stage badges, probability progress bars and star ratings for deal health"><figcaption><p>One table, five column types: Text with Linkify, Badge, Currency, Progress Bar and Rating.</p></figcaption></figure>

#### Access Column Settings

Open **Properties > Data Mappings > Columns** and click a column, or use the chevron on its header in the preview. The settings open in a popover with its own **Cancel** and **Save**: click **Save** there before **Done**.

#### Customize Column Properties

| Setting                               | What it does                                                                                                                         |
| ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| **Label**                             | The column title.                                                                                                                    |
| **Type**                              | How the value is displayed and edited (see [Enhance Data Presentation](#enhance-data-presentation)).                                 |
| **Type Attributes**                   | The settings of the chosen type: Linkify on Text, the color of a Badge, the decimals of a Currency, **Summarize By** for totals.     |
| **Cell Attributes**                   | **Alignment**, **Icon Name**, **Icon Position** and **Slds Cell Class** for the cell. Each one can take a value per row (see below). |
| **Editable**                          | Lets users edit the cell (see [Make your Data Table Editable](#make-your-data-table-editable)).                                      |
| **Display as Input**                  | Shows the cell as an input box, always open.                                                                                         |
| **Filterable**                        | Adds the column to the filters.                                                                                                      |
| **Searchable**                        | Includes the column in the search.                                                                                                   |
| **Hidden**                            | Hides the column. Switch it to **Mapped** and pick a Boolean formula to show it only to some users.                                  |
| **Sortable**                          | Lets users sort on the column.                                                                                                       |
| **Initial Width** and **Fixed Width** | Under **Advanced Options**. The starting width, or a width users cannot change.                                                      |
| **Hide Default Actions**              | Hides the built-in entries of this column's header menu.                                                                             |
| **Wrap Text**                         | Wraps long values instead of cutting them.                                                                                           |
| **Actions**                           | Your own entries in the column header menu (see [Column Header Actions](#column-header-actions)).                                    |

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2F1iHYjhuVIo8c9kaTyWNP%2Fdata-table-tutorial-how-to-conditionally-color-cells-cell-attributes.png?alt=media" alt="Stage column settings with Cell Attributes, where Slds Cell Class has its Field Name toggle on and the Stage Style field selected" width="320"><figcaption><p>Slds Cell Class reads the class of each row from Stage Style.</p></figcaption></figure>

#### Take a value from each row

Many column settings (**Slds Cell Class**, a badge **Variant**, an avatar's **Primary Text**) can take a value per row instead of one value for the whole column. Turn on the **Field Name** toggle next to the setting: each row then reads its own value from a field of that row, usually a formula field. What the toggle shows depends on the setting:

* a field list where you pick the field, for example **Slds Cell Class**;
* a text box where you type the field API name, for example `Stage_Variant__c` in a badge **Variant**.

**Mapped** (the variable icon) is different: it takes one flow resource for the whole column, as on **Hidden**, where a Boolean formula hides the column for some users.

Color and visibility per row come from formula fields: [How to Conditionally Color Cells](/flow/tutorials/components/data-table/tips-and-tricks/how-to-conditionally-color-cells.md), [Customizing the Badge Color using a formula](/flow/tutorials/components/data-table/tips-and-tricks/customizing-the-badge-color-using-a-formula.md) and [How to Set Column Visibility](/flow/tutorials/components/data-table/tips-and-tricks/how-to-set-column-visibity.md).

#### Enhance Data Presentation

The **Type** of a column changes what users see in the cell: a badge, a progress bar, a star rating, a picker, a button. The [Column Types Gallery](/flow/tutorials/components/data-table/column-types-gallery.md) shows them on one table and lists which types each kind of field offers.

Use **Rich Text** for a rich text field, or for a formula that returns markup such as `IMAGE()` or `HYPERLINK()`: [Handling formula text fields](/flow/tutorials/components/data-table/tips-and-tricks/handling-formula-text-field.md). For pictures and QR codes, see [How to add images on the Data Table](/flow/tutorials/components/data-table/how-to-add-images-onthe-data-table.md) and [Displaying a record as a QR code](/flow/tutorials/components/data-table/displaying-a-record-as-a-qr-code.md).

#### Tailor Each Column

Number, Currency and Percent columns take these type attributes:

| Setting                                                           | What it does                                                                              |
| ----------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| **Minimum Integer Digits**                                        | The minimum number of digits before the decimal point.                                    |
| **Minimum Fraction Digits**                                       | The minimum number of digits after the decimal point.                                     |
| **Maximum Fraction Digits**                                       | The maximum number of digits after the decimal point.                                     |
| **Minimum Significant Digits** and **Maximum Significant Digits** | Limit the number of significant digits shown.                                             |
| **Step**                                                          | The increment allowed when users edit the value: `0.01` for cents, `1` for whole numbers. |
| **Summarize By**                                                  | Adds a subtotal per group and a grand total: **Sum**, **Average** or **Count**.           |
| **Treat Blank Values As Zero**                                    | Counts empty cells as `0` in the totals.                                                  |

> **Example:** Set **Minimum Fraction Digits** and **Maximum Fraction Digits** to `2` on an Amount column so every price shows two decimals, such as $12.34.

#### Currency-Specific Formatting

Currency columns add three settings:

| Setting                 | What it does                                                                         |
| ----------------------- | ------------------------------------------------------------------------------------ |
| **Value Display As**    | **Default**, **Converted**, **Formatted** or **Formatted and Converted**.            |
| **Currency Code**       | The currency, such as `USD`, `EUR` or `GBP`.                                         |
| **Currency Display As** | Shows the currency as a **Symbol** ($), a **Code** (USD) or a **Name** (US dollars). |

#### File Upload Column Type

A **File Upload** column puts an upload button in each row. The file is saved right away as a Content Document linked to the row's record, so no Save interaction is needed.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-728b164e32e2536783f0d883b6d5891e398215e8%2F2026-03-23_21-52-53.png?alt=media" alt="An Opportunity Data Table in the Component Builder with an Upload Quotes column of type File Upload, and its type attributes: Accept set to .pdf, File Name Prefix set to Quote_, Multiple and Show File Uploaded turned on"><figcaption><p>An Upload Quotes column that accepts PDF files only.</p></figcaption></figure>

| Setting                | What it does                                                                                 |
| ---------------------- | -------------------------------------------------------------------------------------------- |
| **Label**              | The text of the upload button.                                                               |
| **Accept**             | The file types allowed, such as `.pdf` or `.jpg`. Leave empty to allow all.                  |
| **File Name Prefix**   | Text added before the file name, so `Quote_` turns `proposal.pdf` into `Quote_proposal.pdf`. |
| **File Name Suffix**   | Text added after the file name, before the extension.                                        |
| **Multiple**           | Lets users upload several files at once.                                                     |
| **Show File Uploaded** | Lists the uploaded files under the button, with preview, rename and delete.                  |
| **Disabled**           | Grays out the button.                                                                        |

> **Example:** On an Opportunity table, add a File Upload column so reps attach the signed quote to each deal. Set **Accept** to `.pdf` and **File Name Prefix** to `Quote_` so the files are easy to find in the Files related list.

{% hint style="warning" %}
The file is linked through the row's key field, so **Key Field** must stay on `Id` and the source must be **Variable** or **Query**. A **Manual** row has no record to attach the file to.
{% endhint %}

#### Column Header Actions

**Actions**, in the column settings, adds your own entries to the column header menu. Each entry takes a **Label**, a **Name** (returned to the flow, filled from the label), **Checked**, **Disabled** and an **Icon Name**. Wire each entry to the [Column Header Action Click](#column-header-action-click) interaction: [Column Header Actions and Default Filters](/flow/tutorials/components/data-table/column-header-actions-and-default-filters.md) builds a "Push to Next Quarter" entry on the Close Date column.

### Header

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FQST3Ey7ZARGAcc0pVqrP%2Fdata-table-tutorial-dtref-header.png?alt=media" alt="A deals table with a header holding an opportunity icon, the title Open deals, a caption and two buttons, Export and Reassign"><figcaption><p>Title, caption, avatar and two header actions, joined to the table.</p></figcaption></figure>

| Setting                     | What it does                                                                                                                                                                                         |
| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Title**                   | The title above the table.                                                                                                                                                                           |
| **Caption**                 | A short line printed above the title.                                                                                                                                                                |
| **Avatar**                  | An image, initials or a fallback icon beside the title, with **Size** and **Variant** (Circle or Square).                                                                                            |
| **Is Joined**               | Squares the bottom of the header so it sits flush on the table.                                                                                                                                      |
| **Actions**                 | Buttons in the header, such as Export or Reassign. Each one needs a **Label** and a **Name**, and can be **Disabled** or **Hidden**. Wire them with the [Header Action](#header-action) interaction. |
| **Visible Actions Buttons** | How many actions show as buttons. The rest go into a menu.                                                                                                                                           |
| **Hide Actions**            | Hides every header action.                                                                                                                                                                           |
| **Disable Actions**         | Grays out every header action. Map it to a Boolean formula to change it while the user works.                                                                                                        |

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FNzLuHi7YTH2tCqAV4Epv%2Fdata-table-tutorial-how-to-grayscale-header-actions-dynamically-in-avonni-data-table-panel.png?alt=media" alt="Header group of the Properties tab with Disable Actions bound to the NoRowsSelected formula" width="320"><figcaption><p>Disable Actions reads the formula, for all header actions at once.</p></figcaption></figure>

> **Example:** Keep a Reassign button grayed out until the user ticks a deal, with a formula on the table's own **Number of Selected Rows**: [How to Grayscale Header Actions Dynamically](/flow/tutorials/components/data-table/tips-and-tricks/how-to-grayscale-header-actions-dynamically-in-avonni-data-table.md).

### Column Widths

| Setting                    | What it does                                                                                                    |
| -------------------------- | --------------------------------------------------------------------------------------------------------------- |
| **Column Widths Mode**     | **Fixed** gives every column the same width. **Auto** sizes the columns from their content and the table width. |
| **Max Column Width**       | The widest a column can be.                                                                                     |
| **Min Column Width**       | The narrowest a column can be.                                                                                  |
| **Wrap Text Max Lines**    | How many lines a wrapped cell shows before it is cut.                                                           |
| **Resize Column Disabled** | Stops users from resizing the columns.                                                                          |
| **Resize Step**            | How many pixels a column grows or shrinks when users resize it with the arrow keys.                             |

To size one column only, set its **Initial Width** or **Fixed Width** under **Advanced Options** in its settings.

### Sort

| Setting                    | What it does                                                                                               |
| -------------------------- | ---------------------------------------------------------------------------------------------------------- |
| **Sorted Direction**       | The direction of the sort set in **Data Mappings > Sort By**: **Ascending order** or **Descending order**. |
| **Default Sort Direction** | The direction used the first time a user sorts an unsorted column.                                         |
| **Show Sorted By Value**   | Shows which column the table is sorted on.                                                                 |

Users can sort only the columns with **Sortable** on.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2F6LUw3Z1hhUPNuCY1ZQDf%2Fdata-table-tutorial-dtref-search-sort.png?alt=media" alt="A deals table with Atlas typed in the search box, two matching rows, and the Amount column sorted from highest to lowest"><figcaption><p>Search on the searchable columns, and a default sort on Amount.</p></figcaption></figure>

### Pagination

| Setting                                             | What it does                                                                                                                                   |
| --------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show Pagination**                                 | Splits the rows into pages with buttons under the table.                                                                                       |
| **Number of Items per Page**                        | Rows per page, from 1 to 200 (100 by default). Without pagination, the number of rows loaded at a time.                                        |
| **Alignment**                                       | Puts the buttons on the **Left**, **Center** or **Right**.                                                                                     |
| **First**, **Previous**, **Next**, **Last** buttons | The icon and label of each button. By default the bar shows a previous arrow, the page numbers and a next arrow, with no First or Last button. |

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FylTtfPMXOIc0TrfsqEZ7%2Fdata-table-tutorial-dtref-pagination.png?alt=media" alt="A deals table of ten rows with centered pagination buttons under it and page 2 highlighted"><figcaption><p>Show Pagination with ten rows per page, buttons centered.</p></figcaption></figure>

{% hint style="info" %}
**How rows load.** With **Show Pagination** on, the table shows one page at a time. With it off, the table loads **Number of Items per Page** rows behind a **Show More** button. Give the table a fixed **Height** in the **Style** tab, or use **Full height**, and it loads the next rows as the user scrolls: [Activate infinite scrolling](/flow/tutorials/components/data-table/tips-and-tricks/activate-infinite-scrolling.md).
{% endhint %}

### Pill Container

Turn on **Show Pill Container Selected Item** to show the ticked rows as pills above the table. Users see what they picked without scrolling back through the rows.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FhgFIa0ukD3CAlgPozjNz%2Fdata-table-tutorial-work-with-selected-rows-result.png?alt=media" alt="The deals table with three rows ticked, three pills with the deal names above it, and the line 3 items selected"><figcaption><p>Max Row Selection set to 3, with the picks shown as pills.</p></figcaption></figure>

| Setting         | What it does                                         |
| --------------- | ---------------------------------------------------- |
| **Label Field** | The field shown on each pill, such as the deal name. |
| **Sortable**    | Lets users reorder the pills.                        |
| **Single Line** | Keeps the pills on one line.                         |

### Search

The search box appears as soon as one column has **Searchable** on. It looks in the searchable columns and in **Search Fields**.

| Setting                                  | What it does                                                                                 |
| ---------------------------------------- | -------------------------------------------------------------------------------------------- |
| **Placeholder**                          | The text in the empty search box, "Search" by default.                                       |
| **Position**                             | **Left**, **Right**, **Center**, **Fill**, or **Panel** to move the box into the side panel. |
| **Default Search Value**                 | A search term applied when the table loads.                                                  |
| **Search Fields** (in **Data Mappings**) | Fields that are searched without being shown, such as the account name on a deals table.     |

{% hint style="warning" %}
Rich text fields can be searched with **Variable**, not with **Query**. Time columns are never searched.
{% endhint %}

### Group By

Pick a field in **Data Mappings > Group By** to group the rows by its value, such as the stage of each deal. Add **Summarize By** on a number column to get a subtotal per group and a grand total: [Group rows and show totals](/flow/tutorials/components/data-table/group-rows-and-show-totals.md).

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FQ196qFPGJMihMEQKnklJ%2Fdata-table-tutorial-group-rows-and-show-totals-result.png?alt=media" alt="A Data Table of open opportunities grouped by stage, each group showing its row count and a Sum subtotal of Amount, with a grand total row at the bottom"><figcaption><p>Open deals grouped by stage, with a subtotal per stage and a grand total.</p></figcaption></figure>

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FoXCnFEgJeeCWZCXwTE0b%2Fdata-table-tutorial-group-rows-and-show-totals-group-by-panel.png?alt=media" alt="The Group By section of the Data Table Properties tab with Display Group Rows Count turned on and Direction set to Custom" width="320"><figcaption><p>The Group By section, with the stages in a custom order.</p></figcaption></figure>

| Setting                      | What it does                                                                                                                                                                                               |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Hide Undefined Group**     | Hides the group of rows with no value.                                                                                                                                                                     |
| **Undefined Group Label**    | The label of that group.                                                                                                                                                                                   |
| **Non Collapsible**          | Users cannot collapse the groups.                                                                                                                                                                          |
| **Collapsed**                | The groups start collapsed.                                                                                                                                                                                |
| **Display Group Rows Count** | Shows the number of rows of each group.                                                                                                                                                                    |
| **Show Empty Groups**        | Shows groups that have no rows.                                                                                                                                                                            |
| **Hide Grand Total**         | Hides the grand total row that **Summarize By** adds at the bottom.                                                                                                                                        |
| **Direction**                | **Default**, **Ascending Order**, **Descending Order** or **Custom**. **Custom** opens **Group By Custom Order**, where you list the values in the order you want. Groups left out of the list are hidden. |
| **Linkify**                  | Turns the group label into a link to the record. Lookup fields only.                                                                                                                                       |

{% hint style="warning" %}
Only groupable fields can group rows. Fields such as Created Date or Last Modified Date cannot.
{% endhint %}

### No Results Message

| Setting                     | What it does                               |
| --------------------------- | ------------------------------------------ |
| **No Results Message**      | The text shown when the table has no rows. |
| **Hide No Results Image**   | Hides the picture shown with the message.  |
| **Hide No Results Message** | Hides the message.                         |

***

## Make your Data Table Editable

Turn on **Editable** on a column, or **All Columns Editable** under **Advanced Options**. Users click the pencil in a cell, change the value, and the edited cells turn light yellow until they click **Save** in the bar under the table. Turn on **Display as Input** to show the cells as input boxes, with no click needed.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FbyrLxavzQ11AYMKaZ6Dm%2Fdata-table-tutorial-making-a-field-editable-result.png?alt=media" alt="Data Table of open Opportunities with an edited Stage and an edited Close Date highlighted, above the Cancel and Save buttons"><figcaption><p>Edited cells stay highlighted until the user clicks Save.</p></figcaption></figure>

There are two ways to save the edits:

| Approach                                       | What happens                                                                                                      |
| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| **Save** interaction with **Update Record(s)** | The table writes the edits to Salesforce as soon as the user clicks **Save**.                                     |
| No interaction                                 | **Save** keeps the edits in the flow, in **Edited Rows**. An Update Records element after the screen writes them. |

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fe7e8sVMC3zHh9Arfk6BI%2Fdata-table-tutorial-making-a-field-editable-save-interaction.png?alt=media" alt="Interactions tab with an Update Record(s) interaction under Save" width="320"><figcaption><p>An Update Record(s) interaction under Save writes the edits to Salesforce.</p></figcaption></figure>

**Lookup** columns can be edited too: set the type to **Lookup** and turn **Editable** on. For a picklist, use the **Combobox** type to get the list of values. The objects you can edit are the ones the [User Interface API supports](https://developer.salesforce.com/docs/atlas.en-us.uiapi.meta/uiapi/ui_api_all_supported_objects.htm).

Step by step: [Making a field editable](/flow/tutorials/components/data-table/making-a-field-editable.md).

***

## Row Actions

A column of type **Action** adds a menu at the end of each row, such as Change Owner or Close as Lost. **Button** and **Button Icon** columns put the action on the row itself. All three fire the **Row Action** interaction, which can open another flow, a record, or move to the next screen with the clicked row.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fa2CFE2yFmeMjjihvXpLU%2Fdata-table-tutorial-creating-row-actions-result.png?alt=media" alt="Data Table of opportunities with the row action menu open on one row, showing Change Owner and Close as Lost"><figcaption><p>Each row gets a menu of actions, here Change Owner and Close as Lost.</p></figcaption></figure>

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FKM5PYd67J9F7tcMd0oes%2Fdata-table-tutorial-creating-row-actions-interaction.png?alt=media" alt="Row Action interaction opening a flow dialog with the clicked opportunity Id and a Refresh Query on finish" width="320"><figcaption><p>The Change Owner action opens a second flow on the clicked opportunity, then refreshes the table.</p></figcaption></figure>

Step by step: [Creating Row Actions](/flow/tutorials/components/data-table/creating-row-actions.md).

***

## Filter Data

Filters let users narrow a long list themselves, for example to the deals in Negotiation owned by one rep. Add a field to **Data Mappings > Filters**, or turn **Filterable** on in a column. A field can be a filter without being a column.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FqhMJlOYXBhrZ4WobDDZp%2Fdata-table-tutorial-adding-filters-result.png?alt=media" alt="Data Table with the Stage filter open and two stages selected"><figcaption><p>Filters on Stage and Owner narrow the list on the screen.</p></figcaption></figure>

### What a Filters entry holds

| Setting                        | What it does                                                                         |
| ------------------------------ | ------------------------------------------------------------------------------------ |
| **Filter By**                  | The field to filter on. List each field once.                                        |
| **Default Value (Optional)**   | The value the filter starts with when the table loads. Users can change or clear it. |
| **Custom Label** and **Label** | Under **Advanced Options**. A label of your own in place of the field name.          |

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fd6jLvXHR0UIOv0swDt77%2Fdata-table-tutorial-column-header-actions-and-default-filters-filter-default.png?alt=media" alt="Filters entry with Filter By set to Stage and Default Value (Optional) set to Negotiation/Review" width="320"><figcaption><p>The default value applies when the table loads.</p></figcaption></figure>

### Filter

| Setting                         | What it does                                                                                                                                        |
| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Type**                        | Where the filters show: **Horizontal** (a row of buttons above the table), **Popover** (behind one button) or **Panel** (in the side panel).        |
| **Picklist Filter Sort Order**  | Orders picklist options **Ascending**, **Descending** or by the **Default Order of Field**.                                                         |
| **Use Record Picklist Values**  | Offers only the picklist values found in the table's records, instead of every value of the field.                                                  |
| **Use Cascading Filter Values** | Narrows the options of the other filters to the records that match the current selection. When it is on, **Use Record Picklist Values** is ignored. |

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FmuxLYKkpEQerP4aSyZhS%2Fdata-table-tutorial-adding-filters-filter-type.png?alt=media" alt="Filter group of the Properties tab with the Type setting" width="320"><figcaption><p>The Filter group sets where the filters show.</p></figcaption></figure>

### Side panel

The side panel holds the filters and the search box when their **Type** or **Position** is set to **Panel**.

| Setting                | What it does                                                            |
| ---------------------- | ----------------------------------------------------------------------- |
| **Position**           | Opens the panel on the **Left** or the **Right**.                       |
| **Closed by Default**  | The panel starts closed, so the table gets the full width.              |
| **Hide Toggle Button** | Hides the **Toggle side panel** button that opens and closes the panel. |
| **Reset Button Label** | The label of the button that clears every filter.                       |

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FqvmwpULsS7QM1FvQEOfg%2Fdata-table-tutorial-dtref-filter-panel.png?alt=media" alt="A deals table with a left side panel holding a search box, the Stage filter open with Negotiation/Review ticked, an Owner filter and a Clear filters button"><figcaption><p>Filters and search moved into the side panel.</p></figcaption></figure>

In the panel, each filter shows its operator (**Equals**), a **Search...** box, every value with its count and a **Clear** link. Closed, a filter keeps a summary such as **Stage (1)**.

### Filter Modes

Each filter menu has a mode button that sets how its value is matched. You set nothing in the builder: the modes follow the field type, and users pick one as they filter.

| Field type              | Modes                                                                                                                                                                  |
| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Text, list and picklist | **Equals** (default), **Not Equals**, **Empty**, **Not Empty**                                                                                                         |
| Number, date and time   | **Between** (default), **Not Between**, **Equals**, **Not Equals**, **Less Than**, **Less or Equal**, **Greater Than**, **Greater or Equal**, **Empty**, **Not Empty** |
| Checkbox                | No mode button, always **Equals**                                                                                                                                      |

The flow cannot read the values users chose in the filters: no output variable returns them. When the flow needs the choice, let a combobox on the screen drive the query: [Filter Data Tables with multi-select comboboxes](/flow/tutorials/components/combobox/filter-data-tables-with-multi-select-comboboxes.md). Step by step: [Adding filters](/flow/tutorials/components/data-table/adding-filters.md).

***

## Interactions

An interaction runs an action when users do something in the table: open another flow, export the rows, refresh the query, show a toast. Set them in the **Interactions** tab. For the actions available, see [Interactions](/flow/component-builder/interactions-panel.md).

Which event to use:

| You want users to act on              | Event                          | What the flow receives                                         |
| ------------------------------------- | ------------------------------ | -------------------------------------------------------------- |
| One row (a menu, a button in the row) | **Row Action**                 | The clicked row                                                |
| The ticked rows, or the whole table   | **Header Action**              | The action name; the ticked rows stay in the selection outputs |
| An entry in a column header menu      | **Column Header Action Click** | The action name and the column; the ticked rows as above       |
| The edited cells                      | **Save** and **Cancel**        | The edited rows                                                |

A column header action changes nothing by itself: the flow decides what it acts on. In [Column Header Actions and Default Filters](/flow/tutorials/components/data-table/column-header-actions-and-default-filters.md), **Push to Next Quarter** sits on the Close Date column but moves the deals the user ticked. When the column does not matter, use a header action.

When an interaction passes values on, for example the input variables of an **Open Flow Dialog**, it offers **Selected Record Ids**: the key field values of the ticked rows, the same values as the **Selected Rows Key Field Value** output.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FcJk8OTVQgGrX4Xd2IdRb%2Fdata-table-tutorial-setting-up-data-export-interaction.png?alt=media" alt="Export To interaction settings under Header Action" width="320"><figcaption><p>Export To sits on the header button's interaction.</p></figcaption></figure>

### Column Header Action Click

Fires when a user clicks one of your entries in a column header menu. **Target Name** binds the interaction to one entry, so create the entry in the column's **Actions** first.

### Header Action

Fires when a user clicks a header action. **Target Name** picks the action, by its label. Example: an **Export To** interaction on an Export button ([Setting up data export](/flow/tutorials/components/data-table/setting-up-data-export.md)).

### Row Action

Fires when a user clicks a row action, a button or a button icon in a row. **Target Name** picks the action. Use the clicked row in the interaction, for example to pass its `Id` to an [Open Flow Dialog](/flow/component-builder/interactions-panel/open-flow-dialog.md).

### Save

Fires when the user clicks **Save** after editing. Add an [Update Record(s)](/flow/component-builder/interactions-panel/update-records.md) interaction here to write the edits to Salesforce.

### Cancel

Fires when the user clicks **Cancel** while editing, for example to show a toast that nothing was saved.

### File Upload

Fires when a user uploads a file in a File Upload column.

***

## Styling

The **Style** tab sets the look of the table, section by section.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FTXu73UMEHPiMklMPU94P%2Fdata-table-tutorial-dtref-style-tab.png?alt=media" alt="The Style tab of the Data Table with its seventeen collapsed sections, from Margin to Show More Button" width="320"><figcaption><p>Every Style section of the Data Table.</p></figcaption></figure>

{% tabs %}
{% tab title="Margin" %}
The space around the table, between it and the other components of the screen.

* **Top / Right / Bottom / Left:** the space on each side.
  {% endtab %}

{% tab title="Padding" %}
The space between the table content and its border.

* **Top / Right / Bottom / Left:** the space on each side.
  {% endtab %}

{% tab title="Size" %}
The size of the table.

* **Width / Height:** a fixed size. With pagination off, a fixed **Height** makes the table scroll and load more rows on demand.
* **Advanced Options:** minimum and maximum width and height.
  {% endtab %}

{% tab title="Border" %}
The border around the table.

* **Color**, **Size**, **Style** (solid, dashed, dotted) and **Radius** (rounded corners).
  {% endtab %}

{% tab title="Data Table Cell" %}
The rows and cells.

* **Row Height:** the height of each row.
* **Cell Padding:** the space inside each cell.
  {% endtab %}

{% tab title="Header" %}
The header block above the table.

* **Background Color**, **Padding** on each side, and **Margin Bottom** between the header and the table.
  {% endtab %}

{% tab title="Header Border" %}
The border of the header.

* **Color / Size / Style / Radius**, plus the bottom border used when **Is Joined** is on.
  {% endtab %}

{% tab title="Header Title" %}
The title text.

* **Color**, **Font Size**, **Font Style** and **Font Weight**.
  {% endtab %}

{% tab title="Header Caption" %}
The caption text.

* **Color**, **Font Size**, **Font Style** and **Font Weight**.
  {% endtab %}

{% tab title="Header Actions" %}
The header buttons, per state (default, active, hover).

* **Text Color**, **Background Color** and **Border Color**.
  {% endtab %}

{% tab title="Header Avatar" %}
The header avatar.

* **Background Color**, **Foreground Color** and **Border Radius**.
  {% endtab %}

{% tab title="Pill Container" %}
The pills of the selected rows and their container, per state (default, hover, focus).

* **Pill** background, text, border, radius, shadow and spacing.
* **Pill Container** background, border, radius and spacing.
* **Action** colors of the pill's remove button, and the width and maximum height of the "more" dropdown.
  {% endtab %}

{% tab title="Avatar" %}
The avatars inside cells.

* **Image Object Fit:** how the picture fills its circle or square.
  {% endtab %}

{% tab title="Pagination Buttons" %}
The pagination buttons, per state (default, active, hover, disabled).

* **Background Color**, **Text/Icon Color** and border, plus the colors of the active page button.
  {% endtab %}

{% tab title="Footer" %}
The bar under the table.

* **Background Color**, and the border **Color / Size / Style / Radius**.
  {% endtab %}

{% tab title="Group By Section" %}
The group headers.

* **Background Color**, icon and text colors with their hover colors, font settings, and spacing.
  {% endtab %}

{% tab title="Show More Button" %}
The Show More button, per state (default, active, hover).

* Spacing, **Background Color**, **Text Color** and border.
  {% endtab %}
  {% endtabs %}

To color a cell or a badge from the record's values, use a formula field: [How to Conditionally Color Cells](/flow/tutorials/components/data-table/tips-and-tricks/how-to-conditionally-color-cells.md).

***

## Output Variables

After the screen, any element can read what happened in the table. In a later element, open the resource picker, pick the screen's Data Table and choose the output. In a formula or a text template, write it with the component's API name and the output's API name, for example `{!DealsTable.nbSelectedRows}`.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FDUIeSx9ezvLyzw4vuOgI%2Fdata-table-tutorial-passing-multiple-record-ids-to-another-flow-result.png?alt=media" alt="Three opportunities ticked in the Data Table and the Reassign Opportunities flow open in a dialog showing 3 opportunities selected"><figcaption><p>The ticked rows reach the second flow as a list of Ids.</p></figcaption></figure>

### Row Selection

| Output variable                                        | API name                                 | Type              | What it returns                                                                                                                                                         |
| ------------------------------------------------------ | ---------------------------------------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Selected Rows**                                      | `selectedRows`                           | Record Collection | The ticked rows.                                                                                                                                                        |
| **Selected Rows Key Field Value**                      | `selectedRowsKeyValue`                   | Text Collection   | The key field value (usually the record Id) of each ticked row, the same values as **Selected Record Ids** in an interaction. Also an input: set it to pre-select rows. |
| **Selected Rows Key Field Value comma separated**      | `selectedRowsKeyValueCommaSeparated`     | Text              | The same values, each in single quotes and separated by commas, ready for a SOQL `IN` clause.                                                                           |
| **Selected Rows Key Field Value semi colon separated** | `selectedRowsKeyValueSemiColonSeparated` | Text              | The same values, separated by semicolons.                                                                                                                               |
| **Selected Rows Serialized**                           | `selectedRowsSerialized`                 | Text              | The ticked rows as JSON, for an Apex action that expects text.                                                                                                          |
| **First Selected Row**                                 | `firstSelectedRow`                       | Record            | The first ticked row, handy when only one row can be ticked.                                                                                                            |
| **First Selected Row Key Field Value**                 | `firstSelectedRowKeyValue`               | Text              | The key field value of the first ticked row.                                                                                                                            |
| **First Selected Row Serialized**                      | `firstSelectedRowSerialized`             | Text              | The first ticked row as JSON.                                                                                                                                           |
| **Number of Selected Rows**                            | `nbSelectedRows`                         | Number            | How many rows are ticked.                                                                                                                                               |

> **Example:** After the screen, a **Loop** goes through **Selected Rows**, an **Assignment** sets the new owner on each deal, and one **Update Records** saves them all: [Work with Selected Rows](/flow/tutorials/components/data-table/work-with-selected-rows.md).

### Inline Editing

| Output variable            | API name               | Type              | What it returns                                |
| -------------------------- | ---------------------- | ----------------- | ---------------------------------------------- |
| **Button Save Clicked**    | `buttonSaveClicked`    | Boolean           | `true` once the user clicked **Save**.         |
| **Button Cancel Clicked**  | `buttonCancelClicked`  | Boolean           | `true` once the user clicked **Cancel**.       |
| **Edited Rows**            | `editedRows`           | Record Collection | The edited rows, with the changed fields only. |
| **Edited Rows Full Data**  | `editedRowsFullData`   | Record Collection | The edited rows, with every field.             |
| **Edited Rows Serialized** | `editedRowsSerialized` | Text              | The edited rows as JSON.                       |

> **Example:** A **Decision** checks that **Button Save Clicked** is `true`, then an **Update Records** element saves **Edited Rows**. When **Button Cancel Clicked** is `true`, the flow skips the update.

### Row Actions

| Output variable                        | API name                   | Type   | What it returns                              |
| -------------------------------------- | -------------------------- | ------ | -------------------------------------------- |
| **Clicked Row Action Name**            | `clickedRowActionName`     | Text   | The name of the row action the user clicked. |
| **Clicked Row Action Row**             | `clickedRowActionRow`      | Record | The row the action was clicked on.           |
| **Clicked Row Action Key Field Value** | `clickedRowActionKeyValue` | Text   | The key field value of that row.             |

> **Example:** A row action named `close_lost` moves to the next screen. A **Decision** checks that **Clicked Row Action Name** equals `close_lost`, then an **Update Records** element sets the Stage to Closed Lost on the record whose Id equals **Clicked Row Action Key Field Value**.

### Header Actions

| Output variable                | API name                  | Type | What it returns                                 |
| ------------------------------ | ------------------------- | ---- | ----------------------------------------------- |
| **Clicked Header Action Name** | `clickedHeaderActionName` | Text | The name of the header action the user clicked. |

> **Example:** The header has Reassign and Close buttons that both move to the next screen. A **Decision** on **Clicked Header Action Name** sends the flow down the matching path.

### Column Header Actions

| Output variable                                    | API name                                   | Type | What it returns                                           |
| -------------------------------------------------- | ------------------------------------------ | ---- | --------------------------------------------------------- |
| **Clicked Column Header Action Name**              | `clickedColumnHeaderActionName`            | Text | The **Name** of the column header entry the user clicked. |
| **Clicked Column Header Action Column Field Name** | `clickedColumnHeaderActionColumnFieldName` | Text | The API name of the column it was clicked from.           |

> **Example:** When **Clicked Column Header Action Name** equals `push_next_quarter` and the column is `CloseDate`, the flow moves the close date of the ticked deals by three months.

### File Upload

| Output variable                             | API name                             | Type            | What it returns                                            |
| ------------------------------------------- | ------------------------------------ | --------------- | ---------------------------------------------------------- |
| **File Uploaded Content Document Ids**      | `fileUploadedContentDocumentIds`     | Text Collection | The Content Document Ids of the uploaded files.            |
| **File Uploaded Names**                     | `fileUploadedNames`                  | Text Collection | The names of the uploaded files.                           |
| **File Upload Row Key Field Value**         | `fileUploadRowKeyValue`              | Text            | The key field value of the row the files were uploaded on. |
| **First File Uploaded Content Document Id** | `firstFileUploadedContentDocumentId` | Text            | The Content Document Id of the first file.                 |
| **First File Uploaded Name**                | `firstFileUploadedName`              | Text            | The name of the first file.                                |

> **Example:** After an upload, a **Create Records** element adds a Content Document Link between **First File Uploaded Content Document Id** and the deal's account, so the quote also shows on the account.

### Others

| Output variable       | API name    | Type   | What it returns                         |
| --------------------- | ----------- | ------ | --------------------------------------- |
| **Number of Records** | `nbRecords` | Number | The number of rows loaded in the table. |

> **Example:** A **Decision** after the screen checks that **Number of Records** equals `0` and shows a "Nothing to review this week" screen instead of the next step.

### Flow Interaction Output Variables

Like the other interactive components, the Data Table has ten generic outputs (Variable 1 to Variable 10) that an [Open Flow Dialog](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction fills with values from the flow it opens. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md).

***

## Troubleshooting

| Problem                                                               | Cause                                                                                                                                             | Fix                                                                                                                                                          |
| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| The table is empty at runtime (Variable)                              | The collection is empty when the screen loads: the Get Records element runs after the screen, or finds nothing.                                   | Put the Get Records element before the screen and check in Debug that it returns records.                                                                    |
| The table is empty at runtime (Query)                                 | A query filter is too strict, or reads a flow variable such as `{!recordId}` that is empty at that point.                                         | Remove the filters one at a time, and check that every variable they read has a value.                                                                       |
| A column shows empty cells                                            | The running user cannot read that field (field-level security).                                                                                   | In Setup, open the field in Object Manager, click **Set Field-Level Security** and make it visible to the user's profile.                                    |
| A column has no pencil, even with **All Columns Editable** on         | The field cannot be edited: formula, roll-up summary, auto number, system field, or read-only for the user.                                       | Try to edit the field on a record page. If it cannot be edited there, it cannot be edited in the table either.                                               |
| No column has a pencil                                                | **Read Only** is on.                                                                                                                              | Turn **Read Only** off in the **Properties** tab.                                                                                                            |
| One column has no pencil                                              | Its type cannot be edited, such as Progress Bar, QRcode or Avatar.                                                                                | Switch to an editable type (Text, Number, Date, Combobox, Lookup), or use a row action that opens an edit screen.                                            |
| Saving fails with "Impossible to update a record that does not exist" | The rows have no `Id`. The table needs one on every row to save.                                                                                  | Make sure the Get Records element, or the Apex action, returns `Id`.                                                                                         |
| Saving shows a red "An Error Occurred!" message                       | A validation rule, a required field or missing edit access blocks the save.                                                                       | Hover the warning icon on the row to read the error, then fix the value, the rule or the access.                                                             |
| "Please select minimum 1 row." blocks the user                        | **Required** is on and no row is ticked.                                                                                                          | Make sure rows can be ticked (**Hide Checkbox Column** off, **Max Row Selection** above 0), or turn **Required** off.                                        |
| **Edited Rows** is empty after a save                                 | A **Save** interaction of type Update Record(s) or Upsert Record(s) failed. The table fills **Edited Rows** only after that interaction succeeds. | Remove the interaction (the edits then stay in **Edited Rows** and an Update Records element after the screen writes them), or fix what makes the save fail. |
| **Selected Rows** is empty on the next screen                         | No row was ticked, or the output's object does not match the table's object.                                                                      | Add a Decision after the screen for the empty case, and check that the output uses the same object as the table.                                             |
| There is no search box, or search finds nothing                       | No column has **Searchable** on. Search Fields alone do not show the box, and time columns are never searched.                                    | Turn **Searchable** on for at least one column, or **All Columns Searchable** under **Advanced Options**.                                                    |
| Upserted rows never reach Salesforce                                  | **Key Field** points to a field the flow already fills, so the table cannot tell new rows from existing ones.                                     | Leave **Key Field** on `Id` with Upsert Record(s).                                                                                                           |
| The table reloads after every save                                    | Expected with **Query**: the query runs again to show what the save changed. The table stays on the current page.                                 | Nothing to fix. Leave **Suppress Bottom Bar** off: with it on, every cell change is a save, so the table reloads after each cell.                            |
| A group is missing with **Direction** set to **Custom**               | Groups whose value is not in **Group By Custom Order** are hidden.                                                                                | Add the missing value to the list.                                                                                                                           |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.avonnicomponents.com/flow/flow-components/data-table.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.