> 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

## Overview

{% hint style="success" %}
**New: File Upload Column Type**

You can now add a File Upload column to your Data Table. Users can upload files directly from a table row — files are saved as Content Documents linked to the row's record. See [**the File Upload Column Type section below**](#file-upload-column-type) for setup details.
{% endhint %}

{% hint style="danger" %}
**Important: Optimize Avonni Data Table loading time**

To ensure optimal performance and security when using the Avonni Data Table in Screen Flows, make sure that [**Lightning Web Security is enabled**](https://developer.salesforce.com/docs/platform/lightning-components-security/guide/lws-enable.html) in your Salesforce organization. Enabling this feature helps prevent performance issues and supports the smooth operation of the data table component.
{% endhint %}

The Avonni Data Table displays structured tabular data with support for selection, inline editing, filtering, sorting, grouping, pagination, search, and customizable header actions — all inside a Salesforce Screen Flow.

***

## Tutorials

Discover how to effectively leverage the capabilities of the Avonni Data Table.

### Core functionality

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Data Table 101</strong></td><td></td><td></td><td><a href="/pages/bTsjAaQvWdNnxxD7fHii">/pages/bTsjAaQvWdNnxxD7fHii</a></td><td><a href="/files/6zU50jM4KM2WZB1GzxFJ">/files/6zU50jM4KM2WZB1GzxFJ</a></td></tr><tr><td><strong>Guided Tutorial by Yumi Ibrahimzade</strong></td><td></td><td></td><td><a href="https://www.linkedin.com/posts/yumiibrahimzade_ad-salesforce-trailblazercommunity-activity-7208434323576827906-T2X3">https://www.linkedin.com/posts/yumiibrahimzade_ad-salesforce-trailblazercommunity-activity-7208434323576827906-T2X3</a></td><td><a href="/files/0BvGRnj1oZDClE2GlEQi">/files/0BvGRnj1oZDClE2GlEQi</a></td></tr></tbody></table>

### Enhancing Data Display & Interaction <a href="#enhancing-data-display-and-interaction" id="enhancing-data-display-and-interaction"></a>

<table data-view="cards"><thead><tr><th></th><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>Adding Images</strong></td><td></td><td></td><td><a href="/files/Y5HjfDkrkY80vGCaOERW">/files/Y5HjfDkrkY80vGCaOERW</a></td><td><a href="/pages/vmb4lxNZz3C8jYpmmqQf">/pages/vmb4lxNZz3C8jYpmmqQf</a></td></tr><tr><td><strong>Displaying a record as a QR Code</strong></td><td></td><td></td><td><a href="/files/lMedwwW4kVvQOIQQKuKs">/files/lMedwwW4kVvQOIQQKuKs</a></td><td><a href="/pages/FCV510w7m9NQBW2SEB2n">/pages/FCV510w7m9NQBW2SEB2n</a></td></tr><tr><td><strong>How to Conditionally Color Cells</strong></td><td></td><td></td><td><a href="/files/ptd78jYRQY7sBQYoObo9">/files/ptd78jYRQY7sBQYoObo9</a></td><td></td></tr></tbody></table>

### Advanced Features <a href="#advanced-features" id="advanced-features"></a>

<table data-view="cards"><thead><tr><th></th><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>Add fields as filters</strong></td><td></td><td></td><td><a href="/files/Sxwqv7zuxWsWyThoYmjU">/files/Sxwqv7zuxWsWyThoYmjU</a></td><td><a href="/pages/q3qgA2nQZ3mC0SNpI06R">/pages/q3qgA2nQZ3mC0SNpI06R</a></td></tr><tr><td><strong>Making a field Editable</strong></td><td></td><td></td><td><a href="/files/s19v4YGXvo7s1lLfspzG">/files/s19v4YGXvo7s1lLfspzG</a></td><td><a href="/pages/cBH9B45E3VEDo6b3E5Xe">/pages/cBH9B45E3VEDo6b3E5Xe</a></td></tr><tr><td><strong>Setting up Data Export</strong></td><td></td><td></td><td><a href="/files/jASbeqtBat8pYM0eMK7Y">/files/jASbeqtBat8pYM0eMK7Y</a></td><td><a href="/pages/snGyMucsQqK4y3NA7ipb">/pages/snGyMucsQqK4y3NA7ipb</a></td></tr><tr><td><strong>Implementing Bulk Edit</strong></td><td></td><td></td><td><a href="/files/Bse7jQsgWjqZ6gjEappJ">/files/Bse7jQsgWjqZ6gjEappJ</a></td><td><a href="/spaces/dHOej9Pd5IxJNGEJMZKW/pages/eEXfcvxEb6eXYcmS2nej">/spaces/dHOej9Pd5IxJNGEJMZKW/pages/eEXfcvxEb6eXYcmS2nej</a></td></tr></tbody></table>

### Tips and Tricks <a href="#tips-and-tricks" id="tips-and-tricks"></a>

Take your Data Tables to the next level with these handy tips and tricks.

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Add Clickable Buttons</strong></td><td></td><td></td><td><a href="/pages/ufB696CreNwYkrV7TP9l">/pages/ufB696CreNwYkrV7TP9l</a></td></tr><tr><td><strong>Show or Hide Columns Based on Conditions</strong></td><td></td><td></td><td><a href="/pages/vv7gHCWdy5M3wkZgY9QM">/pages/vv7gHCWdy5M3wkZgY9QM</a></td></tr><tr><td><strong>How to color-code Badges</strong></td><td></td><td></td><td><a href="/pages/K42mituNDEN7ib4mcHi0">/pages/K42mituNDEN7ib4mcHi0</a></td></tr><tr><td><strong>How to Grayscale Header Actions Dynamically</strong></td><td></td><td></td><td><a href="/pages/VWtAv8qxKBPoHbt9FhO8">/pages/VWtAv8qxKBPoHbt9FhO8</a></td></tr><tr><td><strong>How to refresh the Data Table by pressing a button</strong></td><td></td><td></td><td><a href="/pages/eu6FBvsBeycsuPLzDNxz">/pages/eu6FBvsBeycsuPLzDNxz</a></td></tr><tr><td><strong>How to use formulas in Text Fields</strong></td><td></td><td></td><td><a href="/pages/HWBWQRa7l1oJcP0j4RnZ">/pages/HWBWQRa7l1oJcP0j4RnZ</a></td></tr><tr><td><strong>How to send multiple Record IDs to Another Flow</strong></td><td></td><td></td><td><a href="/pages/LlUGfD9DRLzomcnZl4Mu">/pages/LlUGfD9DRLzomcnZl4Mu</a></td></tr><tr><td>🎥 <strong>7 Tips and Tricks on the Avonni Data Table</strong></td><td></td><td></td><td><a href="https://www.youtube.com/watch?v=f1qzN1EqryU">https://www.youtube.com/watch?v=f1qzN1EqryU</a></td></tr></tbody></table>

### Explore Reactive Queries

For more in-depth examples of how to use the Avonni Data Table, check out our reactive query tutorials.

{% content-ref url="/pages/2wR9yu7nPiFuToYZIslZ" %}
[Reactive Query Tutorials](/flow/tutorials/reactive-query-tutorials.md)
{% endcontent-ref %}

***

## Configuration

To configure it, click the component on the Flow screen. The **Edit Data Table Component** panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

### Data Source

The first step is establishing the Data Source — it determines where table records come from.

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

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Manual</strong></td><td>Ideal for static or predefined data.</td><td></td><td><a href="/pages/N1uTGxMW16RfbM4g39MR">/pages/N1uTGxMW16RfbM4g39MR</a></td></tr><tr><td><strong>Variable</strong></td><td>Great when your table data is linked to variable collections in your flow.</td><td></td><td><a href="/pages/ziXlgb71wxsEEwGKKCqQ">/pages/ziXlgb71wxsEEwGKKCqQ</a></td></tr><tr><td><strong>Query</strong></td><td>Perfect for tables reflecting dynamically changing data or real-time updates.</td><td></td><td><a href="/pages/viMlx8xVDeuY59H0WnZo">/pages/viMlx8xVDeuY59H0WnZo</a></td></tr></tbody></table>

<details>

<summary><strong>Can I use a collection variable output from an action button in a screen flow as the data source for a data table?</strong></summary>

Yes, you can use an action button's output collection as a data source for your data table.

**Key Requirement:** The output must be a collection of **record variables**. The Avonni Data Table requires a collection of records when using a custom variable as a data source.

**Steps:**

1. Drag a **Display Text** component onto your screen flow canvas temporarily.
2. Configure it to display the output collection variable from your action button.
3. Run in Debug mode — observe the Display Text to find the exact variable name.
4. Remove the Display Text and set the Data Table's Data Source to that variable name.

<img src="/files/GM8NDEd0TisfANDC56Nr" alt="" data-size="original">

</details>

### Data Mappings

Map Salesforce fields to Data Table columns.

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

{% hint style="info" %}
In this section:

* [**Set up data mappings**](#setting-up-data-mappings)
* [**Display fields from related records**](#displaying-fields-from-lookup-relationships)
  {% endhint %}

#### Setting Up Data Mappings

Two methods to add columns:

**Drag-and-Drop:** Once you select your data source, a list of available fields appears on the left. Drag fields onto the table canvas to add columns.

<figure><img src="/files/kWknGQ9OfzsOnf5OUoSn" alt=""><figcaption><p>How to create a new column by dragging and dropping fields.</p></figcaption></figure>

**Using the 'Add Columns' Button:** Click "Add Columns" in the Data Mappings section to select from available fields.

<figure><img src="/files/YRIjv9AoaMFv4Mbl8BH3" alt=""><figcaption><p>How to create a new column using the "Add Columns" button</p></figcaption></figure>

#### Displaying Fields from Lookup Relationships

Use the **Query** data source to display fields from related records (e.g., Account Name on a Contacts table). In the Source Field dropdown, fields with a `>` symbol are from lookup relationships (e.g., `Account > Name`).

**Example:** To show Account Type on an Opportunity table: use Query, select Opportunity, add a column with source field `Account > Account Type`.

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

### Properties

<figure><img src="/files/5PhvMcPzJrGs4OjQMc73" alt=""><figcaption></figcaption></figure>

| Setting                           | Description                                                                                                                                                                                                                                                                                                                |
| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Hide Table Header**             | Hides the table header when enabled.                                                                                                                                                                                                                                                                                       |
| **Wrap Table Header**             | Long column headers automatically wrap up to 3 lines, preventing clipped text.                                                                                                                                                                                                                                             |
| **Hide Checkbox Column**          | Removes the checkbox column used for row selection.                                                                                                                                                                                                                                                                        |
| **Show Row Number Column**        | <p>Displays row numbers in the first column.<br><mark style="color:red;"><strong>NOTE: The Avonni Data Table uses Salesforce's standard Data Table as its foundation. Because of this, if you turn on "inline editing," row numbers will automatically appear. This is Salesforce's built-in behavior.</strong></mark></p> |
| **Required**                      | Makes row selection mandatory for users.                                                                                                                                                                                                                                                                                   |
| **Max Row Selection**             | Sets the maximum number of rows that can be selected.                                                                                                                                                                                                                                                                      |
| **Suppress Bottom Bar**           | Hides the footer with Save and Cancel buttons during inline editing.                                                                                                                                                                                                                                                       |
| **Always Display Bottom Bar**     | Forces the inline edit footer to always be visible.                                                                                                                                                                                                                                                                        |
| **Show Number of Items Selected** | Displays the count of selected items.                                                                                                                                                                                                                                                                                      |
| **Read Only**                     | Prevents editing, making the table read-only.                                                                                                                                                                                                                                                                              |

{% hint style="info" %}
**Important Note on Row Pre-selection**

The Avonni Data Table, like the underlying `lightning-datatable` component, **does not have a built-in property for pre-selecting rows based on a record ID.** Row selections are managed by user interaction, not by programmatically setting selections.
{% endhint %}

**Mobile Responsiveness:** The Data Table is built on Salesforce's Lightning Data Table, which has limited responsiveness on small screens. Options:

* Build a separate simplified table for mobile using component visibility settings.
* Use the [Avonni List](/flow/flow-components/list.md) component, which has built-in responsive layout.

### 🆕 Customize Columns

{% hint style="info" %}
In this section:

* [**Access Column Settings**](#access-column-settings)
* [**Customize Column Properties**](#customize-column-properties)
* [**Tailor Each Column**](#tailor-each-column)
* [**Currency-Specific Formatting**](#currency-specific-formatting)
* [**Enhance Data Presentation**](#enhance-data-presentation)
* **🆕** [**File Upload Column Type**](#file-upload-column-type)
* [**Required Fields**](#required-fields)
  {% endhint %}

#### Access Column Settings

Click on any column listed in the **Data Mappings** section to open its settings.

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

#### Customize Column Properties

* **Width:** How wide the column is.
* **Alignment:** Left, right, or center.
* **Sorting:** Whether users can sort by this column.
* **Text Wrapping:** How text wraps within the column.
* **Color & Formatting Cells:** [Check this tutorial](/flow/tutorials/components/data-table/tips-and-tricks/how-to-conditionally-color-cells.md).

#### Tailor Each Column

For number-based columns (currency, percentages):

* **Minimum Fraction Digits** — minimum digits after the decimal point.
* **Maximum Fraction Digits** — maximum digits after the decimal point.
* **Minimum Integer Digits** — minimum digits before the decimal.
* **Step Size** — allowed increments for the number.

<figure><img src="/files/xRabIwfx8qiv0bQM8TJU" alt="" width="375"><figcaption></figcaption></figure>

**Example:** Set Minimum Fraction Digits to "2" and Maximum Fraction Digits to "2" to always display prices with two decimal places (e.g., $12.34).

#### Currency-Specific Formatting

For currency columns:

* **Value Display As:** Default, Converted, Formatted, or Formatted and Converted.
* **Currency Code:** e.g., USD, EUR, GBP.
* **Currency Display As:** Symbol only, code only, or symbol and code.
* **Minimum/Maximum Integer Digits, Fraction Digits, Significant Digits, Step.**

{% hint style="info" %}
**Controlling Decimal Places in Currency and Percent Fields**

Use `step` to control editing increments:

* `step: 0.01` (default): two decimal places.
* `step: 0.001`: three decimal places.
* `step: 1`: whole numbers only.

Use `minimumFractionDigits` and `maximumFractionDigits` to control displayed decimal places.
{% endhint %}

#### Enhance Data Presentation

Use the **Type** setting to change how data appears:

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

<details>

<summary>List of available Data Types</summary>

* **Action:** Dropdown menu for row-level actions (edit, delete, view details).
* **Avatar:** Profile picture or user image.
* **Badge:** Colorful label for status or key terms.
* **Boolean:** Checkmark for true, blank for false.
* **Button:** Clickable button to trigger an action.
* **Button Icon:** Button with a descriptive icon.
* **Color Picker:** Color value selector.
* **Combobox:** Dropdown list of choices.
* **Counter:** Simple numerical count.
* **Currency:** Monetary value with locale formatting.
* **Date:** Calendar date with regional formatting.
* **Date Local:** Date without time, formatted for the user's locale.
* **Email:** Clickable email address link.
* **File Upload:** Upload button per row — files are stored as Salesforce Content Documents linked to the row's record.
* **Location:** Geographical coordinates.
* **Number:** Numerical values.
* **Percent:** Value as a percentage.
* **Phone:** Clickable phone number.
* **Progress Bar:** Completion status as a percentage bar.
* **Progress Circle:** Circular completion status.
* **Progress Ring:** Another circular progress format.
* **QR Code:** Scannable QR code.
* **Rating:** Star or point-based rating.
* **Rich Text:** Text with bold, italics, lists, etc.
* **Slider:** Draggable range selector.
* **Text:** Plain unformatted text.
* **Toggle:** On/off switch.
* **URL:** Clickable website link.

</details>

**Displaying Rich Text Fields:** Select the **Rich Text** type in column settings to correctly render bold, italics, lists, and other formatting from Salesforce rich text fields.

<figure><img src="/files/3TKnDPjsGhyX7B1wJKVi" alt=""><figcaption></figcaption></figure>

#### File Upload Column Type

The **File Upload** type adds an upload button inside each row. When clicked, Salesforce's standard file upload dialog opens. The file is stored as a **Content Document** linked to the row's record.

**How to set it up:**

1. In **Data Mappings**, click the column you want to use for file uploads.
2. Change the **Type** to **File Upload**.
3. Configure:

<table><thead><tr><th width="220.91796875">Setting</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Label</strong></td><td>Text on the upload button. Defaults to "Upload File".</td></tr><tr><td><strong>Accept</strong></td><td>Restricts file types (e.g., <code>.pdf</code>, <code>.jpg</code>). Leave empty to allow all.</td></tr><tr><td><strong>File Name Prefix</strong></td><td>Text added before the file name on save (e.g., <code>Quote_</code> → <code>Quote_proposal.pdf</code>).</td></tr><tr><td><strong>File Name Suffix</strong></td><td>Text added after the file name (before extension) on save.</td></tr><tr><td><strong>Multiple</strong></td><td>Allows uploading more than one file at once.</td></tr><tr><td><strong>Show File Uploaded</strong></td><td>Shows uploaded files below the button with name, preview, rename, and delete options.</td></tr><tr><td><strong>Disabled</strong></td><td>Grays out the upload button.</td></tr></tbody></table>

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

> **Example:** On an Opportunity Data Table, add a File Upload column so reps can attach signed quotes. Set **Accept** to `.pdf` and **File Name Prefix** to `Quote_` so uploaded files are easy to find in the record's Files related list.

{% hint style="success" %}
**No save interaction needed**

Files are uploaded and saved immediately when the user selects them — no Save interaction is needed in the Interactions tab.
{% endhint %}

{% hint style="warning" %}
**Important**

File Upload requires a valid record ID for each row. Your Data Table must use the **Query** or **Variable** data source — it won't work with **Manual** data since there's no record to link the file to.
{% endhint %}

#### Required Fields

Create validation rules in Salesforce for required fields. The Avonni Data Table automatically honors these rules during data entry.

{% content-ref url="/pages/vmb4lxNZz3C8jYpmmqQf" %}
[How to add Images onthe Data Table](/flow/tutorials/components/data-table/how-to-add-images-onthe-data-table.md)
{% endcontent-ref %}

{% content-ref url="/pages/fcScUnn9UGArXSHDNTWC" %}
[Displaying Record Name field as a link](/flow/tutorials/components/data-table/displaying-record-name-field-as-a-link.md)
{% endcontent-ref %}

{% content-ref url="/pages/FCV510w7m9NQBW2SEB2n" %}
[Displaying a Record as a QR Code](/flow/tutorials/components/data-table/displaying-a-record-as-a-qr-code.md)
{% endcontent-ref %}

### Column Widths

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

| Setting                    | Description                                                                                 |
| -------------------------- | ------------------------------------------------------------------------------------------- |
| **Column Widths Mode**     | **Fixed**: equal widths for all columns. **Auto**: widths based on content and table width. |
| **Max Column Width**       | Maximum width for all columns.                                                              |
| **Min Column Width**       | Minimum width for all columns.                                                              |
| **Wrap Text Max Lines**    | Maximum lines before truncating cell content.                                               |
| **Resize Column Disabled** | Disables manual column resizing.                                                            |
| **Resize Step**            | Width adjustment amount when resizing with arrow keys.                                      |

{% hint style="info" %}
**SET COLUMN WIDTH INDIVIDUALLY**

Go to **Data Mappings** → click a column → scroll down → click **Advanced Option** → set a fixed width for that column only.

<img src="/files/NewLp5ZtaiQGRmjBj8L6" alt="" data-size="original">
{% endhint %}

### Sort

**Default Sort Direction** sets whether sorted columns default to ascending or descending order.

{% hint style="info" %}
Each column can be made sortable individually by activating the **Sortable** toggle in that column's properties.

<img src="/files/Zp8n6AYuSCGktsBWMwSu" alt="" data-size="original">
{% endhint %}

### Pagination

**Show Pagination** activates page-by-page navigation. Configure:

* **Items Per Page** — how many records show per page.
* **Pagination Alignment** — Left, Center, or Right.
* **Buttons** — customize icon and label for First, Last, Next, Previous controls.

{% @arcade/embed url="<https://app.arcade.software/share/43ibnWwd9a8MprQQAEy5>" flowId="43ibnWwd9a8MprQQAEy5" %}

### Pill Container

Enable **Show Pill Container** to display selected rows as pills above the table.

<figure><img src="/files/DXsOnFaCWj601vcF29Sb" alt=""><figcaption><p>Pill Container showing selected items</p></figcaption></figure>

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

| Setting         | Description                                    |
| --------------- | ---------------------------------------------- |
| **Label Field** | Field name used for the pill label.            |
| **Sortable**    | Enables reordering within the pill container.  |
| **Single Line** | Restricts the pill container to a single line. |

### Search

The Search Engine options configure the search box above the table.

{% hint style="warning" %}
**Rich Text Fields:**

* You **cannot** search rich text fields with **Query** Data Source.
* You **can** search rich text fields with **Variable** Data Source.
  {% endhint %}

**Making a field searchable** — from the canvas: click the column header arrow → **Allow Search**. From the Properties panel: Data Mappings → click the column → toggle **Searchable**.

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

**Search Fields** — add field API names (e.g., `Name`, `Account.Name`) that are searchable without displaying them as visible columns.

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

**Default Search Value** — set a predefined search term that activates when the table loads.

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

### Group By

The **Group By** feature categorizes table rows by a selected field.

{% hint style="warning" %}
**Limitations on Grouping Fields in Salesforce**

Not every field can be used for grouping. Fields like CreatedDate or LastModifiedDate cannot be grouped. Only fields marked as "groupable" in Salesforce can be used.
{% endhint %}

**How It Works:** Choose a column as the group-by field. The table instantly organizes rows into sections based on unique values in that column.

<figure><img src="/files/b9pJHjJiRNNlYACYLkQr" alt=""><figcaption><p>Avonni Data Table with the Group By in Action</p></figcaption></figure>

{% @arcade/embed url="<https://app.arcade.software/share/QQFtBlffS4CQVC8QrqV3>" flowId="QQFtBlffS4CQVC8QrqV3" %}

**Customize Grouped Data:**

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

| Option                       | Description                                         |
| ---------------------------- | --------------------------------------------------- |
| **Hide Undefined Label**     | Hides groups labeled as 'undefined'.                |
| **Undefined Group Label**    | Sets a custom label for undefined groups.           |
| **Non Collapsible**          | Makes grouped sections non-collapsible.             |
| **Collapsed**                | Starts groups in a collapsed state.                 |
| **Display Group Rows Count** | Shows the row count in each group.                  |
| **Show Empty Groups**        | Displays groups even when they have no data.        |
| **Direction**                | Order direction of the groups.                      |
| **Linkify**                  | Makes lookup values clickable for quick navigation. |

**Change the Group Order:** Choose Default, Ascending, Descending, or Custom order. Custom lets you drag and rearrange grouping values.

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

**Linkify values:** When enabled for lookup fields in the Group By column, group headers become clickable links that navigate to the corresponding record.

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

{% embed url="<https://youtu.be/JiFWXONbrF0>" %}

***

## Make your Data Table Editable

Inline editing lets users update data directly in the table.

### Two Ways to Edit

#### Inline Editing (Pencil Icon)

A pencil icon appears next to the data. Users click it to edit.

<figure><img src="/files/wN26S6PHqme3NoSXYkLX" alt=""><figcaption><p>Inline editing feature with the pencil icon enabled</p></figcaption></figure>

#### Direct Cell Editing

Choose **Display as Input** to transform the field into an always-editable input box — no click needed.

<figure><img src="/files/jRoYIu4M3YL67OEDPhKl" alt=""><figcaption><p>Toggle to make a specific field displayed as input.</p></figcaption></figure>

<figure><img src="/files/YK72PJtVXjqSEaITNPQj" alt=""><figcaption><p>Enable 'Display as Input' from 'All Columns Settings' to make every field directly editable.</p></figcaption></figure>

### Setting up the save interaction

{% hint style="warning" %}
This step is critical for making **inline editing functional**. Always include a save interaction to capture and persist user modifications. 👇
{% endhint %}

{% @arcade/embed url="<https://app.arcade.software/share/27kelamS0uDm1EZtsdcM>" flowId="27kelamS0uDm1EZtsdcM" %}

### Supported Objects for Inline Editing

Here's the [list of all supported objects](https://developer.salesforce.com/docs/atlas.en-us.uiapi.meta/uiapi/ui_api_all_supported_objects.htm) for inline editing.

{% hint style="warning" %}
**Note on Lookup Fields**

While you can display fields from related records, **lookup fields themselves are not currently supported for inline editing** and will remain read-only even if the "Editable" toggle is on.
{% endhint %}

{% content-ref url="/pages/cBH9B45E3VEDo6b3E5Xe" %}
[Making a field editable](/flow/tutorials/components/data-table/making-a-field-editable.md)
{% endcontent-ref %}

***

## Row Actions

### Creating Row Actions

Row Actions provide a dropdown of options when a row's action button is clicked.

{% @arcade/embed url="<https://app.arcade.software/share/GM83tZiAOn9HTUL8ZKmz>" flowId="GM83tZiAOn9HTUL8ZKmz" %}

### Making Row Actions functional

After creating row actions, wire them to [**interactions**](https://docs.avonnicomponents.com/flow/flow-components/pages/hpUQHY0v3xCgR6iyJj3N#id-2.-make-the-row-actions-work) to make them do something.

{% content-ref url="/pages/hpUQHY0v3xCgR6iyJj3N" %}
[Creating Row Actions](/flow/tutorials/components/data-table/creating-row-actions.md)
{% endcontent-ref %}

***

## Filter Data

Apply filters to help users find information quickly.

### Ways to Add Filters

#### From the Canvas

Click the arrow next to a column header → **Allow Filtering**.

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

#### From the Properties Panel

Data Mappings → click the column → toggle **Filterable**.

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

#### Quick Filtering

Click **All columns settings** → click **Filterable** to enable filtering on all columns at once.

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

#### Set filters for fields that aren't visible

In Data Mappings, add a field as a filter without displaying it as a visible column — allows behind-the-scenes filtering without cluttering the table.

<figure><img src="/files/hf3Dqmdq2G9DIIeLQ81Y" alt=""><figcaption><p>How to Apply Field Filters Without Displaying the Fields</p></figcaption></figure>

### Filter Options

<table><thead><tr><th width="169">Filter Type</th><th width="340">Illustration</th><th>Description</th></tr></thead><tbody><tr><td><strong>Horizontal</strong></td><td><img src="/files/Uvj1Ma3OOIxs2vOwhF8E" alt=""></td><td>Filters appear directly above the table in a horizontal row.</td></tr><tr><td><strong>Popover</strong></td><td><img src="/files/J6dB5hdITOxgAxYpI9z1" alt=""></td><td>Filters hide behind clickable icons; click to reveal a floating filter panel.</td></tr><tr><td><strong>Side Panel</strong></td><td><img src="/files/NFJGXdC2QSyAe5KcInAt" alt=""></td><td>Filters in a side panel to the left or right, expandable/collapsible.</td></tr></tbody></table>

### Filter Panel Settings

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

* **Position (Left, Right):** Which side the panel slides from.
* **Is Closed:** Initial state — closed (data-first) or open (filter-first).
* **Hide Toggle Button:** Hide the toggle when another element controls the panel.

<figure><img src="/files/9CQcrb0FHsrE4GGMD01T" alt=""><figcaption></figcaption></figure>

### Dynamic Picklist Filters

When **Hide Picklist Empty Values** is enabled, picklist filter menus show only values currently used by records in the table — no irrelevant options.

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

***

## Header

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

* **Title** — a clear title for the table.
* **Caption** — short description below the title.
* **Icon** — visual indicator.
* **Is Joined** — removes the header's bottom border so it blends with the table.
* **Actions** — header buttons for global actions (configure behavior in the Interactions tab).
* **Visible Actions** — how many action buttons show directly; extra buttons collapse into a dropdown.
* **Hide Actions** — completely hides the action menu.
* **Disable Actions** — makes the action menu inactive but still visible.

{% hint style="success" %}
**Tutorial**: [How to Grayscale Header Actions Dynamically in Avonni Data Table](/flow/tutorials/components/data-table/tips-and-tricks/how-to-grayscale-header-actions-dynamically-in-avonni-data-table.md)
{% endhint %}

***

## Interactions

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

| Interaction       | Fires When...                                       |
| ----------------- | --------------------------------------------------- |
| **Header Action** | A user clicks a header action button.               |
| **Row Action**    | A user clicks a row-level action button.            |
| **Save**          | A user clicks the Save button after inline editing. |
| **Cancel**        | A user clicks the Cancel button while editing.      |
| **File Upload**   | A user uploads a file via a File Upload column.     |

[Full list of available actions](/flow/component-builder/interactions-panel.md).

***

## Styling

The **Style** tab gives you fine-grained control over the Data Table's appearance. Configure it from the **Style** tab of the Edit Data Table panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the table, creating space between it and other elements on the screen.

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

{% tab title="Padding" %}
Controls the *inner* spacing between the table content and its border.

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

{% tab title="Size" %}
Controls the table's dimensions.

* **Width / Height:** Set fixed dimensions for the table.
* **Min Width / Max Width / Min Height / Max Height:** Constrain the size within bounds.
  {% endtab %}

{% tab title="Border" %}
Customizes the border surrounding the table.

* **Color:** Set the border color.
* **Size:** Adjust the border thickness.
* **Style:** Choose a border style (e.g. solid, dashed, dotted).
* **Radius:** Control the roundness of the corners.
  {% endtab %}

{% tab title="Data Table Cell" %}
Controls the dimensions and spacing of individual cells.

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

{% tab title="Header" %}
Styles the overall header section.

* **Background Color:** Set the header background.
* **Padding (Top / Right / Bottom / Left):** Adjust the inner spacing of the header.
* **Margin Bottom:** Set the space between the header and the table body.
  {% endtab %}

{% tab title="Header Border" %}
Customizes the border around the header, including the joined-header bottom border.

* **Color / Size / Style / Radius:** Set the header border appearance.
* **Bottom Border Color / Size / Style (Is Joined):** Set the bottom border when the header is joined to the table.
  {% endtab %}

{% tab title="Header Title" %}
Styles the header title text.

* **Color:** Set the title color.
* **Font Size / Font Style / Font Weight:** Control the title typography.
  {% endtab %}

{% tab title="Header Caption" %}
Styles the header caption text.

* **Color:** Set the caption color.
* **Font Size / Font Style / Font Weight:** Control the caption typography.
  {% endtab %}

{% tab title="Header Actions" %}
Styles the action buttons shown in the header. Colors are set per state (default, active, hover).

* **Text Color:** Set the action text color.
* **Background Color:** Set the action background color.
* **Border Color:** Set the action border color.
  {% endtab %}

{% tab title="Header Avatar" %}
Styles the avatar shown in the header.

* **Background Color / Foreground Color:** Set the avatar icon colors.
* **Border Radius:** Control the roundness of the avatar corners.
  {% endtab %}

{% tab title="Pill Container" %}
Styles the pills and pill container used in pill-type cells. Colors are set per state (default, hover, focus).

* **Pill Background / Text / Border Color / Border Size / Border Style / Radius / Shadow:** Style individual pills.
* **Pill Spacing (Block Start / Block End / Inline Start / Inline End):** Adjust the spacing around pills.
* **Pill Container Background / Border Color / Radius / Spacing:** Style the container that holds the pills.
* **Action Background / Border / Text Color:** Style the pill action button.
* **More Dropdown Width / Max Height:** Size the overflow dropdown.
  {% endtab %}

{% tab title="Avatar" %}
Styles avatars rendered within cells.

* **Image Object Fit:** Control how avatar images fit their container.
  {% endtab %}

{% tab title="Pagination Buttons" %}
Styles the pagination controls. Colors are set per state (default, active, hover, disabled).

* **Background Color:** Set the button background.
* **Text/Icon Color:** Set the button text and icon color.
* **Color Border / Border Size / Border Style:** Style the button border.
* **Active Button Background / Text/Icon / Border Color:** Style the currently active page button.
  {% endtab %}

{% tab title="Footer" %}
Customizes the table footer.

* **Background Color:** Set the footer background.
* **Border Color / Size / Style / Radius:** Style the footer border.
  {% endtab %}

{% tab title="Group By Section" %}
Styles the grouping header shown when rows are grouped.

* **Background Color:** Set the section header background.
* **Icon Color / Icon Color Hover:** Set the expand/collapse icon colors.
* **Text Color:** Set the section header text color.
* **Font Size / Font Style / Font Weight / Font Family:** Control the header typography.
* **Spacing (Block Start / Block End / Inline Start / Inline End):** Adjust the header spacing.
  {% endtab %}

{% tab title="Show More Button" %}
Styles the load-more button. Colors are set per state (default, active, hover).

* **Spacing (Block Start / Block End / Inline Start / Inline End):** Adjust the button spacing.
* **Background Color:** Set the button background.
* **Text Color:** Set the button text color.
* **Border Color / Size / Radius:** Style the button border.
  {% endtab %}
  {% endtabs %}

{% hint style="success" %}
**Color & Formatting Cells:** [Check this tutorial](/flow/tutorials/components/data-table/tips-and-tricks/how-to-conditionally-color-cells.md) to learn how.
{% endhint %}

***

## Specifications

### Output Attributes

| Property                                 | Type      | Description                                                                                                                                                                                                                                                                                                                               |
| ---------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `buttonCancelClicked`                    | Boolean   |                                                                                                                                                                                                                                                                                                                                           |
| `buttonSaveClicked`                      | Boolean   |                                                                                                                                                                                                                                                                                                                                           |
| `clickedHeaderActionName`                | String    |                                                                                                                                                                                                                                                                                                                                           |
| `clickedRowActionKeyValue`               | String    | Key field value of the record related to the clicked row action.                                                                                                                                                                                                                                                                          |
| `clickedRowActionName`                   | String    |                                                                                                                                                                                                                                                                                                                                           |
| `clickedRowActionRow`                    | Object    | Record related to the clicked row action.                                                                                                                                                                                                                                                                                                 |
| `editedRows`                             | Object\[] | Array of records containing only the edited values of the rows.                                                                                                                                                                                                                                                                           |
| `editedRowsFullData`                     | Object\[] | Array of records containing the full data of the edited rows.                                                                                                                                                                                                                                                                             |
| `editedRowsSerialized`                   | String    | Serialized version of the edited rows.                                                                                                                                                                                                                                                                                                    |
| `fileUploadedContentDocumentIds`         | String\[] |                                                                                                                                                                                                                                                                                                                                           |
| `fileUploadedNames`                      | String\[] |                                                                                                                                                                                                                                                                                                                                           |
| `fileUploadRowKeyValue`                  | String    |                                                                                                                                                                                                                                                                                                                                           |
| `firstFileUploadedContentDocumentId`     | String    |                                                                                                                                                                                                                                                                                                                                           |
| `firstFileUploadedName`                  | String    |                                                                                                                                                                                                                                                                                                                                           |
| `firstSelectedRow`                       | Object    |                                                                                                                                                                                                                                                                                                                                           |
| `firstSelectedRowKeyValue`               | String    | Key field value of the first selected row.                                                                                                                                                                                                                                                                                                |
| `firstSelectedRowSerialized`             | String    |                                                                                                                                                                                                                                                                                                                                           |
| `flowInteractionOutputVariables`         | Apex      | Generic interaction outputs (apex://avxp.FlowInteractionOutputVariables). When a component interaction assigns a value back to the flow (e.g. a Set Flow Variable interaction), the result is exposed here as variable1 through variable10 — each a slot holding a typed value (text, number, boolean, date, date/time, or a collection). |
| `nbRecords`                              | Number    | Number of records in the datatable.                                                                                                                                                                                                                                                                                                       |
| `nbSelectedRows`                         | Number    | Number of selected rows in the datatable.                                                                                                                                                                                                                                                                                                 |
| `selectedRows`                           | Object\[] |                                                                                                                                                                                                                                                                                                                                           |
| `selectedRowsKeyValue`                   | String\[] | Array of key field values of the selected rows.                                                                                                                                                                                                                                                                                           |
| `selectedRowsKeyValueCommaSeparated`     | String    | String of the key field values of the selected rows separated by commas.                                                                                                                                                                                                                                                                  |
| `selectedRowsKeyValueSemiColonSeparated` | String    | String of the key field values of the selected rows separated by semi colons.                                                                                                                                                                                                                                                             |
| `selectedRowsSerialized`                 | String    | Serialized array of the selected rows.                                                                                                                                                                                                                                                                                                    |

**Common ways to use these outputs:**

> **Example:** After the Data Table screen, use a **Loop** element to iterate through **Selected Rows** and create a Task for each selected Opportunity — e.g., "Follow up on {!loopVariable.Name}".

> **Example:** Pass **Edited Rows** into an **Update Records** element to save the user's inline edits back to Salesforce. Use **Edited Rows Full Data** if you need the complete record state.

> **Example:** A row action called "Delete" is triggered. Use a **Decision** element to check if **Clicked Row Action Name** equals "Delete", then use a **Delete Records** element with **Clicked Row Action Key Field Value** as the record ID.

> **Example:** Add a **Decision** element that checks if **Button Save Clicked** is `true` — if yes, proceed to update records; if **Button Cancel Clicked** is `true`, skip the update.

{% hint style="info" %}
**Which output should I use for selected rows?**

* Need to loop through records or update them? → **Selected Rows** (record collection)
* Need just the IDs for an Apex action or subflow? → **Selected Rows Key Field Value** (text collection) or the comma/semicolon-separated versions
* Only allowing single selection? → **First Selected Row** (single record)
  {% endhint %}

## Learn More

{% embed url="<https://www.youtube.com/watch?v=f1qzN1EqryU>" %}

{% content-ref url="/pages/divgiMwywmBYP2Nk050I" %}
[Tips and Tricks](/flow/tutorials/components/data-table/tips-and-tricks.md)
{% endcontent-ref %}

<details>

<summary>Unique Features of the Avonni Data Table Component.</summary>

🔹 [**Inline Editing**](#make-your-data-table-editable): Modify data directly within the table.

🔹 [**Display Lookup Fields**](/flow/tutorials/components/data-table/displaying-record-name-field-as-a-link.md): Rendered as clickable links to record pages.

🔹 [**Advanced Data Formatting**](#enhance-data-presentation): QR Code, Progress Bar, Badge, and more.

🔹 [**Sortable Data**](#sort): One-click column sorting.

🔹 [**Custom Column Width**](#column-widths): Adjust column widths per column.

🔹 [**Row Actions**](/flow/tutorials/components/data-table/creating-row-actions.md): Predefined functions from each row.

🔹 [**Pagination**](#pagination): Navigate through data pages.

🔹 [**Infinite Scrolling**](/flow/tutorials/components/data-table/tips-and-tricks/activate-infinite-scrolling.md): Dynamic data loading on scroll.

🔹 [**Data Filtering**](#filter-data): Apply filters to refine data.

🔹 [**Update Records Interaction**](/flow/component-builder/interactions-panel/update-records.md): Modify records seamlessly.

🔹 [**Copy Records Interaction**](/flow/component-builder/interactions-panel/copy-records.md): Duplicate records from the table.

🔹 [**Integrated Header**](#header): Polished unified header.

🔹 [**Selective Searchability**](#search): Set hidden search fields.

🔹 [**Query Data Source**](/flow/component-builder/data-sources/query.md): No-code real-time data queries.

</details>

<details>

<summary>Data Table Component Builder</summary>

<img src="/files/2kCafVPPfKBWadHMV270" alt="" data-size="original">

1. **Template Gallery**: Pre-configured data table templates for easy deployment.
2. **Undo/Redo**: Correct mistakes or revisit changes.
3. **Full Height**: Data Table uses full screen height and activates infinite scrolling.
4. **Pull to Boundary**: Extends Data Table to every edge, reducing white space.
5. **All Columns Settings**: Universal configuration that supersedes individual column preferences.
6. **Copy/Paste**: Duplicate settings to another Data Table on your screen flow.
7. **Properties Tab**: All component settings.
8. **Interactions Tab**: Configure and manage interactions.
9. **Style Tab**: Customize appearance.
10. **Fields selection**: Choose and drag fields onto the canvas.
11. **Data Table Preview**: Quickly visualize and modify the table.

</details>

***

## Troubleshooting Common Issues

| Problem                                                                              | Cause                                                                                                                                                                                                                              | Fix                                                                                                                                                 |
| ------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| The table shows nothing at runtime, but rows appear in the Component Builder preview | The flow variable feeding the **Records** input is empty when the screen loads — the **Get Records** element hasn't run yet.                                                                                                       | Place the **Get Records** element before the screen element, and confirm the variable is populated.                                                 |
| The table shows nothing at runtime (Query data source)                               | Query filters are too restrictive, or reference a flow variable (like `{!recordId}`) that isn't set at runtime.                                                                                                                    | Remove filters one by one to isolate the issue. Verify each flow variable used in a filter is populated at the screen step.                         |
| One or more columns show empty cells                                                 | The running user has no Read access to that field (Field-Level Security).                                                                                                                                                          | Go to **Setup → Object Manager → \[Object] → Fields & Relationships → \[Field] → Set Field-Level Security** and set the field to **Visible**.       |
| The pencil icon doesn't appear on a column even with All Columns Editable on         | The field is a formula, roll-up, auto-number, or system field — or the user has Read-Only FLS on it.                                                                                                                               | Test editing the field on a standard Salesforce record page. If it can't be edited there, it can't be edited in the Data Table either.              |
| The pencil icon doesn't appear on any column                                         | **Read Only** is toggled on at the component level.                                                                                                                                                                                | Open **Properties** and turn **Read Only** off.                                                                                                     |
| The pencil icon doesn't appear on a specific column                                  | The column type doesn't support inline editing (image, progress bar, QR code, URL image, etc.).                                                                                                                                    | Switch to an editable type (text, number, date, picklist, lookup) or use a row action that opens a separate edit screen.                            |
| Saving inline edit fails with "Impossible to update a record that does not exist"    | The `Id` field isn't part of the records collection. The Data Table needs an `Id` on every row to save back to Salesforce.                                                                                                         | Confirm the Get Records element returns `Id`. If records come from an Apex action, ensure `Id` is included in the returned collection.              |
| Saving inline edit fails with a red "An Error Occurred!" toast                       | A validation rule, missing required field, or denied Edit access on a modified field.                                                                                                                                              | Hover the warning icon on the row to read the field-level error. Fix the permission or validation rule.                                             |
| "Please select minimum 1 row." blocks the user                                       | **Required** is on but the user hasn't selected any row.                                                                                                                                                                           | Ensure rows can be selected (turn **Hide Checkbox Column** off and set **Max Row Selection** above 0), or turn **Required** off.                    |
| **Edited Rows** output variable is empty after saving                                | A Save interaction of type **Update Records**, **Datatable Update Records**, or **Upsert Records** is wired — the Data Table delegates the save to the interaction and only fills **Edited Rows** after that interaction succeeds. | Either remove the interaction (the Data Table saves records on its own), or finish wiring the interaction with field assignments.                   |
| **Selected Rows** output variable returns nothing in the next screen                 | The user didn't tick any checkbox, or the output variable's SObject type doesn't match the **Records SObject API Name**.                                                                                                           | Add a Decision element after the screen to handle the empty case. Confirm the output variable's SObject type matches the source object.             |
| Search returns no results                                                            | **Search Fields** is empty AND no column has **Searchable** on. Time-type columns are also excluded from search.                                                                                                                   | Add field API names to **Search Fields**, or turn **Searchable** on for individual columns. Toggle **Allow Search on All Columns** for quick setup. |
| Upsert rows never reach Salesforce                                                   | The **Key Field** in **Records SObject Mapping** points to a non-Id field and the flow pre-fills that field — the Data Table can't tell new rows from existing ones.                                                               | Leave **Key Field** unset (defaults to `Id`) when using **Upsert Records**.                                                                         |
| The table jumps back to page 1 after every save                                      | Expected in **Query** mode — after a save the query re-runs to pick up server-side changes.                                                                                                                                        | Toggle **Suppress Bottom Bar** on if the reload is visually disruptive. The behavior itself is intentional.                                         |

***


---

# 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/flow/flow-components/data-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.