> 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/dynamic-components/components/data-table.md).

# Data Table

The Avonni Data Table displays Salesforce data in a structured, actionable grid — built on the standard Salesforce Lightning Data Table and extended with advanced filtering, inline editing, grouping, and flexible layout controls.

## Overview

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><h4><i class="fa-table-cells-header" style="color:blue;">:table-cells-header:</i> <strong>Data Table Tutorials</strong></h4></td><td><a href="/pages/tVUa6OzNqAe1xb3fxhT7">/pages/tVUa6OzNqAe1xb3fxhT7</a></td><td><a href="/files/umPM7wlae3Z2EVwjPGtg">/files/umPM7wlae3Z2EVwjPGtg</a></td></tr></tbody></table>

<details>

<summary><strong>Quick Start: Creating a High-Priority Opportunity Table</strong></summary>

#### 1. Connect Your Live Salesforce Data

First, we need to tell the component to look for "Open" Opportunities with a high value.

1. In the Properties Panel, set the Data Source to Query.
2. Select Opportunity as the Salesforce Object.
3. In the Filter section, add two conditions:
   * `StageName` is not equal to `Closed Won`
   * `Amount` is greater than `50000`
4. Set the Sort By to `CloseDate` (Ascending) so the most urgent deals appear at the top.

***

#### 2. Map Your Columns & Types

Now, choose which fields the user needs to see. In the Data Mappings section, add the following columns:

| **Column Label** | **Source Field** | **Data Type** | **Behavior**                                     |
| ---------------- | ---------------- | ------------- | ------------------------------------------------ |
| **Deal Name**    | `Name`           | Lookup        | Makes the name a clickable link to the record.   |
| **Value**        | `Amount`         | Currency      | Displays the dollar sign and formatting.         |
| **Stage**        | `StageName`      | Badge         | Wraps the status in a professional-looking pill. |
| **Close Date**   | `CloseDate`      | Date          | Formats the date based on user settings.         |
| **Probability**  | `Probability`    | Progress Bar  | Visually shows how close the deal is to closing. |

***

#### 3. Enable Quick Edits (Inline Editing)

Let's make the Stage and Close Date editable so reps don't have to leave the page to update their deals.

1. Click on the Stage column in Data Mappings and toggle Editable to ON.
2. Click on the Close Date column and toggle Editable to ON.
3. (Optional) In the General Properties, change the Edit Mode to Display as Input if you want the fields to look like text boxes immediately.

***

#### 4. Configure the "Save" Button

Important: Your edits won't save to Salesforce yet! We must link the "Save" button to an action.

1. Go to the Interactions tab.
2. Select the On Save event.
3. Click Add Action and select Update Records.
4. This tells the component: *"When the user clicks Save, take the new values and update the actual Salesforce Opportunity records."*

***

#### Result

You now have a dynamic table where users can:

* See only high-value, open deals.
* Visualize progress via a progress bar.
* Update stages and dates directly in the table.
* Click a name to jump straight to the Opportunity record.

</details>

## Configuration

To configure the Data Table, select it on the canvas. The **Edit Data Table** panel opens on the right with three tabs: **Properties**, **Interactions**, and **Style**. The sections below mirror the Properties tab.

### Data Source

Before you build your table, you must tell the component where to get the data it should display. You have several options, depending on the source and nature of your data:

<table data-view="cards"><thead><tr><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>Enter data directly into the component configuration.</td><td></td></tr><tr><td><strong>Variable</strong></td><td>This is useful for data that changes based on user interactions or other component logic.</td><td></td></tr><tr><td><strong>Query</strong></td><td>This is the most common option for displaying Salesforce records.</td><td></td></tr></tbody></table>

<figure><img src="/files/UY4Osg7KpnJ1wqRpKrek" alt="" width="322"><figcaption></figcaption></figure>

#### Query

Use this to fetch records directly from Salesforce. You can select an object (like *Accounts* or *Opportunities*), set filter logic (e.g., "Industry equals Technology"), and define sort orders. This is the most common choice for dynamic, real-time dashboards.

<a href="/pages/LS6kWKFeoYxoYLwO5pvK" class="button primary" data-icon="database">Learn more about the Query Data Source</a>

#### Variable

Select this if your data is already stored in a collection variable. This is ideal when you've already processed data in a previous step and simply need the table to display the results.

<a href="/pages/TQE8Wz5q8lxGZKdGEHSI" class="button primary" data-icon="square-root-variable">Learn more about the Variable Data Source</a>

#### Manual

This allows you to manually enter static data rows directly into the component. It is perfect for simple, fixed lists or for prototyping a layout before connecting it to live Salesforce records.

<a href="/pages/p2RQTJ1oud3ALc4E5ott" class="button primary" data-icon="hand">Learn more about the Manual Data Source</a>

### Data Mappings

Once the source is connected, you must bridge the gap between your raw Salesforce fields and the table's columns in the Data Mappings section.

#### Add Column

Create a new entry for every field you want to display.

<figure><img src="/files/zgAY15r2lWLmY3mgHdKO" alt="" width="321"><figcaption></figcaption></figure>

#### Select a Source Field

Select the specific API field (e.g., `AnnualRevenue` or `Status`) to populate the column.

<figure><img src="/files/rQY5U9N0Tq6xLQ72LcY0" alt="" width="320"><figcaption></figcaption></figure>

#### Edit Column Label (optional)

Enter a user-friendly header (e.g., "Company Revenue"). If left blank, the system defaults to the Salesforce field label.

<figure><img src="/files/BhbwaGKdw9eIEMIMdjOj" alt="" width="320"><figcaption></figcaption></figure>

#### Data Types

The **Data Type** determines exactly how a field appears in your table. While the system auto-detects the format, you can manually select a data type to transform raw data into a more professional, scannable interface.

<figure><img src="/files/QVhAWz9ZPY0MOIG8JyYJ" alt="" width="320"><figcaption></figcaption></figure>

**Standard Information Formats**

* **Text**: Basic alphanumeric characters.
* **Number / Currency / Percent**: Formats digits with symbols, decimals, and proper alignment.
* **Date / Date-Local / Date Time**: Displays timestamps based on the user's local settings.
* **Boolean**: A simple checkbox for True/False values.
* **URL / Email / Phone**: Automatically creates clickable links to websites, email clients, or dialers.
* **Time**: Displays a time value.

**Enhanced Visual Components**

* **Badge**: Wraps text in a colored pill (e.g., Green for "Completed", Red for "Overdue").
* **Progress Bar / Progress Circle / Progress Ring**: A visual indicator representing a value from 0 to 100.
* **Avatar**: Displays a profile picture, initials, or a thumbnail directly in the cell.
* **QR Code**: Converts data into a scannable QR code.
* **Rich Text**: Supports HTML for custom formatting, including bold and specific colors.
* **Lookup / Record Picker**: Creates a link that navigates users directly to the related Salesforce record.
* **Action**: A dedicated slot for row action buttons like *Edit* or *Delete*.
* **Button / Button Icon**: Renders a clickable button or icon button in each row cell.
* **Checkbox Button**: A checkbox rendered as a button.
* **Color Picker**: Displays and allows editing of a color value.
* **Counter**: A numeric stepper input.
* **Rating**: A star-rating display.
* **Slider**: A range-input slider.
* **Toggle**: An on/off toggle switch.
* **Textarea**: A multi-line text input.
* **Combobox / Multi-Combobox**: A dropdown selector, including multi-select variant. (Query and Variable data sources only.)
* **File Upload**: Adds an upload button directly in the cell. (Query and Variable data sources only.)

{% hint style="success" %}

#### Pro-Tip

Use **Badges** and **Progress Bars** for your most important "at-a-glance" metrics. It prevents the user from having to read every word to understand a record's status.
{% endhint %}

#### File Upload Column Type

The **File Upload** data type adds an upload button inside each row. When a user clicks it, Salesforce's standard file upload dialog opens and the uploaded file is stored as a **Content Document** linked to that row's record. You can find the uploaded files in the record's **Files** related list in Salesforce.

**How to set it up:**

1. In the **Data Mappings** section, click on the column you want to use for file uploads.
2. Change the **Data Type** to **File Upload**.
3. Configure the settings below as needed.

<table><thead><tr><th width="244.9921875">Setting</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Label</strong></td><td>The text on the upload button. Defaults to "Upload File" if left empty.</td></tr><tr><td><strong>Accept</strong></td><td>Restricts which file types can be uploaded. Enter a list of extensions (e.g., <code>.pdf</code>, <code>.jpg</code>, <code>.png</code>). Leave empty to allow all file types.</td></tr><tr><td><strong>File Name Prefix</strong></td><td>Text added before the original file name when saving. For example, a prefix of <code>Quote_</code> renames <code>proposal.pdf</code> to <code>Quote_proposal.pdf</code>.</td></tr><tr><td><strong>File Name Suffix</strong></td><td>Text added after the file name (before the extension). For example, a suffix of <code>_v2</code> renames <code>proposal.pdf</code> to <code>proposal_v2.pdf</code>.</td></tr><tr><td><strong>Multiple</strong></td><td>When enabled, users can select and upload more than one file at a time.</td></tr><tr><td><strong>Show File Uploaded</strong></td><td>Displays a list of uploaded files below the button. Each file shows its name with a document type icon. Users can click a file name to preview it, double-click to rename it, or use the dropdown menu to rename or delete it.</td></tr><tr><td><strong>Disabled</strong></td><td>Grays out the upload button and prevents interaction.</td></tr></tbody></table>

{% hint style="success" %}

#### No save interaction needed

Unlike inline editing, files are uploaded and saved immediately when the user selects them. The Content Document is created and linked to the record as soon as the upload finishes — there is no need to configure an On Save interaction. Renaming and deleting files are also instant.
{% endhint %}

#### Column Settings

Once you have added your fields, you can customize how each one behaves. To access these settings, go to the **Data Mappings** section and **click on the specific Column Name** you wish to configure. This opens the **Column Settings panel**, where you can configure the column's interactive features and visual style.

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

<table><thead><tr><th width="154.341796875">Feature</th><th>Description</th></tr></thead><tbody><tr><td><strong>Sortable</strong></td><td>Allows users to reorder the table based on this column's values.</td></tr><tr><td><strong>Filterable</strong></td><td>Adds the column to the filtering menu for data refinement.</td></tr><tr><td><strong>Searchable</strong></td><td>Includes the column's content in the global search results.</td></tr><tr><td><strong>Editable</strong></td><td>Enables users to modify the cell value (requires an On Save Interaction).<br><mark style="background-color:orange;"><strong>Note</strong></mark>: Enabling "Editable" only changes the UI. To actually save changes back to Salesforce, you must configure an <a href="#on-save"><strong>On Save interaction</strong></a> in the Interactions tab.</td></tr><tr><td><strong>Alignment</strong></td><td>Choose between Left, Center, or Right text alignment.</td></tr></tbody></table>

#### Layout & Readability

Control the visual "breathing room" and text behavior to ensure your table remains professional and easy to read.

**Data Alignment**

You can set the horizontal position of your text to Left, Center, or Right.

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

*<mark style="color:$success;background-color:green;">**Best Practice**</mark>:* Keep text and picklists left-aligned, but right-align currency and number fields for easier numerical comparison.

**Width Control**

**Auto (Default)**: The table intelligently distributes space based on content length and the user's screen size.

**Fixed Width**: Enter a specific pixel value (e.g., 150px) for columns that need a consistent size, such as *Status Badges* or *Action* buttons.

<figure><img src="/files/DHt8iInFsjvxetu9aQ4k" alt="" width="161"><figcaption></figcaption></figure>

{% hint style="success" %}

#### Individual Column Widths

To set a specific pixel width for a single column, navigate to Data Mappings > \[Select Column] > Advanced Options and enter a fixed width.

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

**Handling Long Text**

**Wrap Text**: Allows long text to expand into multiple lines, preventing data from being hidden. You can set a Max Line limit (e.g., 3 lines) to keep row heights consistent.

<figure><img src="/files/EjKjLi5jR1IJ4cEZUs0G" alt="" width="188"><figcaption></figcaption></figure>

**Clip Text**: Long strings are cut off with an ellipsis (...), maintaining a tight, single-line table row.

#### Searching on Hidden Fields

This feature allows users to search for specific fields in the underlying dataset, even if those fields are not visible in the table view. Requires Query data source.

* Select the Data Table
* Open the Data Mappings section
* In the **Search Fields** attribute: select the fields that must be searchable without being displayed in the Data Table.

<figure><img src="/files/jJmVaJ6KuUgY1TyRNDHG" alt="" width="563"><figcaption></figcaption></figure>

<a href="/pages/8H1wzEnyZeJegM0iD1JY" class="button primary" data-icon="magnifying-glass">Tutorial: How To Configure Search</a>

#### Grouping Data

To enable grouping, navigate to the **Data Mappings** section in the Properties Panel and select the field you wish to use as your "Group By" in the Group By option attribute. Requires Query data source.

<figure><img src="/files/26KFQfgDbyZtBwZISWgO" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/bIJo289aUX26UwijVoqB" alt="" width="159"><figcaption></figcaption></figure>

<a href="/pages/8hdirNfwaoNoLfC0bDlb" class="button primary" data-icon="diagram-subtask">Tutorial: How to Configure Grouping</a>

### Content

The **Content** section controls the table's general display, row behavior, and editing mode.

#### Hide Table Header

If enabled, the column header row is hidden entirely.

#### Wrap Table Header

If enabled, column headers wrap up to three lines instead of being clipped when the header text is too wide for the column.

#### Hide Checkbox Column

If enabled, the checkbox column used for row selection is hidden.

#### Show Row Number Column

If enabled, a row number column is displayed as the first column. Use **Row Number Offset** (visible when this is on) to set the starting count value. Default offset: 0.

#### Clickable Row

If enabled, clicking anywhere on a row selects it, in addition to the checkbox. Editable cells are excluded from this behavior.

#### Max Row Selection

Restricts the maximum number of rows a user can select at once. Leave blank or set to zero for unlimited selection.

**Making Row Selection Required**

Toggle on **Required** in the component builder to enforce that at least one row must be selected. If no rows are selected, the Data Table shows a validation message and prevents the user from proceeding.

#### Suppress Bottom Bar / Always Display Bottom Bar

**Suppress Bottom Bar**: If enabled, the footer containing the Save and Cancel buttons is hidden during inline editing. Hidden when **Always Display Bottom Bar** is on.

**Always Display Bottom Bar**: If enabled, the Save and Cancel footer is always visible, even when no edits are pending. Hidden when **Suppress Bottom Bar** is on.

#### Show Number of Items Selected

If enabled, the count of currently selected rows is displayed.

#### Read Only

If enabled, records cannot be edited at all, regardless of per-column editable settings.

**Advanced options**

The following settings apply a behavior uniformly to all columns at once, without requiring per-column configuration in Data Mappings:

| Setting                          | Description                                                                         |
| -------------------------------- | ----------------------------------------------------------------------------------- |
| **All Columns Editable**         | Makes every column editable.                                                        |
| **All Columns Display as Input** | Renders all eligible columns as input fields immediately (no pencil icon required). |
| **All Columns Filterable**       | Makes every column appear in the filter menu.                                       |
| **All Columns Searchable**       | Includes every column's content in global search results.                           |
| **All Columns Sortable**         | Enables sorting on every column.                                                    |
| **All Columns Wrappable**        | Enables text wrapping on every column.                                              |
| **Hide Default Actions**         | Hides the default column-header actions (clip/wrap menu) from all columns.          |

#### Configuring Inline Editing

**Inline editing** allows users to update Salesforce records directly from the grid. Enabling it is a two-step process.

**Step 1: Enable the UI (Column Level)**

1. Go to the **Data Mappings** section in the **Properties Panel**.
2. Select the specific column you want to make editable.
3. Toggle the **Editable** attribute to **ON**.

<figure><img src="/files/IhVjyA6GgqUXVDSvwU24" alt="" width="323"><figcaption></figcaption></figure>

{% hint style="success" %}

#### Pro-Tip: Dynamic Row-Level Editing

You don't have to settle for a column being "always editable" or "always read-only." You can control editability on a **row-by-row** basis by linking the **Editable** attribute to a Boolean field (Checkbox or Formula) from your Salesforce data.

This allows the table to intelligently enable or disable the pencil icon based on the specific data in that row.
{% endhint %}

**Step 2: Enable the Save Logic (Interaction Level)**

<mark style="color:orange;background-color:red;">**Important**</mark>: Turning on "**Editable**" only changes the user interface. To actually save the changes to the Salesforce database, **you must configure the Save interaction**.

1. Navigate to the Interactions tab.
2. Select the On Save event.
3. Add the Update Records action.

<a href="/pages/nUg0E8Oa6iGVdQZ5ssnL#adding-the-on-save-interaction" class="button primary" data-icon="floppy-disks">Tutorial: How to create an "On Save" interaction</a>

**Editing Modes**

You can customize how the editing interface appears:

* **Standard (Pencil Icon)**: The familiar Salesforce look; an edit icon appears when hovering over a cell.
* **Direct Entry (Display as Input)**: Cells appear as input boxes immediately, removing the need for an extra click.

<figure><img src="/files/ipvmYzmqjEaJiGFXAjna" alt="" width="319"><figcaption></figcaption></figure>

{% hint style="info" %}

#### Note

* **Row Numbers**: When Inline Editing is active, Salesforce automatically displays a Row Number Column to track unsaved "draft" changes. This is a native requirement and cannot be disabled.
* **The Bottom Bar**: When a user modifies a cell, a footer with Save and Cancel buttons appears automatically to manage the transaction.
  {% endhint %}

#### Tutorials

<a href="/pages/nUg0E8Oa6iGVdQZ5ssnL" class="button primary" data-icon="pencil">Tutorial: How to make a field editable</a> <a href="/pages/85KP6lw2JA3gubQtgLFy" class="button primary" data-icon="check-double">Tutorial: How to Enable Bulk Editing</a>

### Header

The Header section gives you control over the appearance and functionality of the Data Table header.

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

| Setting                     | Description                                                                                                                                                                            |
| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Title**                   | Title of the Data Table, displayed in the header.                                                                                                                                      |
| **Caption**                 | Caption displayed in the header above the title.                                                                                                                                       |
| **Avatar**                  | An image, fallback icon, or initials to display next to the title. Advanced options include Size (X-Small to XX-Large, default Medium) and Variant (Circle or Square, default Square). |
| **Help Text**               | Adds a help icon with tooltip text to the header for user guidance.                                                                                                                    |
| **Is Joined**               | When enabled, the bottom border becomes square and shadowless, allowing the header to sit flush onto another component.                                                                |
| **Show More Details Panel** | When enabled, a side panel opens showing additional record details when a row is selected.                                                                                             |

#### Managing Header Actions

Header actions are buttons for tasks that affect the whole table (e.g., "New Record," "Export to CSV").

* **Actions**: Define the list of buttons (Label, Name, Icon, Disabled, Hidden, Title, Alternative Text).
* **Visible Actions Buttons**: Controls how many buttons appear directly in the header. Additional buttons move to a "More" dropdown menu.
* **Hide Actions**: If enabled, the action menu is removed entirely from the header.
* **Disable Actions**: If enabled, action buttons remain visible but are grayed out and unclickable.

{% hint style="warning" %}

#### Note

Header action buttons are only visual triggers. You must define what happens when they are clicked in the Interactions tab under **Header Action Click**.
{% endhint %}

<a href="/pages/dFEKRi2GX7SXkQ0mm3OV" class="button primary" data-icon="table-cells-header">Tutorial: How to Create Header Actions</a>

### Column Widths

Control the visual "breathing room" for table columns and how users can resize them.

| Setting                    | Description                                                                                                                                          | Default |
| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| **Column Widths Mode**     | How column widths are calculated. **Fixed**: columns share equal space. **Auto**: the table distributes space based on content and screen size.      | Fixed   |
| **Max Column Width**       | The maximum pixel width for all columns.                                                                                                             | 1000    |
| **Min Column Width**       | The minimum pixel width for all columns.                                                                                                             | 50      |
| **Wrap Text Max Lines**    | Maximum number of lines before wrapped text is truncated.                                                                                            | —       |
| **Resize Column Disabled** | If enabled, users cannot drag column borders to adjust width.                                                                                        | Off     |
| **Resize Step**            | The pixel increment for column resizing when using the keyboard arrow keys. Restricts dragging to specific intervals rather than free-form resizing. | —       |

### Sort

Configure the default sorting behavior of the table.

| Setting                    | Description                                                                   | Options               | Default   |
| -------------------------- | ----------------------------------------------------------------------------- | --------------------- | --------- |
| **Sorted Direction**       | Specifies the current sorting direction.                                      | Ascending, Descending | Ascending |
| **Default Sort Direction** | Specifies the default sorting direction on an unsorted column.                | Ascending, Descending | Ascending |
| **Show Sorted By Value**   | If enabled, displays an indicator showing which field the table is sorted by. | —                     | Off       |

### Pagination

When dealing with more than 20–30 records, displaying everything at once can overwhelm users and slow down the page.

**Three Ways to Browse Data**

<table><thead><tr><th width="188.7216796875">Style</th><th>Behaviour</th><th>Best Used For</th></tr></thead><tbody><tr><td><strong>Standard Pagination</strong></td><td>Displays "Next/Previous" buttons or page numbers.</td><td>Users who need to know exactly how much data exists.</td></tr><tr><td><strong>"Show More" Button</strong></td><td>Appends a new set of records to the bottom when clicked.</td><td>Giving users control over how much data they load.</td></tr><tr><td><strong>Infinite Scrolling</strong></td><td>Automatically loads more data as the user scrolls down.</td><td>High-speed browsing in a fixed-height workspace.</td></tr></tbody></table>

#### Option 1: Standard Pagination (Toggle ON)

Activating the **Show Pagination** toggle adds a navigation bar to the table.

* Configure: Use Pagination Alignment to position controls (Left, Center, or Right) and choose between a Simple view (arrows only) or a Full view (specific page numbers).
* <mark style="background-color:green;">**Pro-Tip**</mark>: If you have Inline Editing enabled, we recommend a page size of 10–15 items. This keeps the "Save/Cancel" footer visible on the screen, so the user doesn't have to scroll to find it.

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

#### Option 2: "Show More" Manual Loading (Toggle OFF)

If you leave **Show Pagination** off but still define a number in the **Number of Items per Page** field (range: 1–500, default: 100), the table adopts a "load-on-demand" behavior. After the first batch of records is displayed, a "Show More" button appears at the bottom.

#### Option 3: Infinite Scrolling (The "Fixed Window" View)

For a truly seamless experience with very large datasets, you can enable Infinite Scrolling.

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

Instead of the table growing longer as more data loads, you set a Fixed Height for the table. As the user scrolls to the bottom of the scrollable area, the table automatically fetches and displays the next set of records.

### Pill Container

The Pill Container is particularly useful for bulk-action workflows (e.g., "Delete 5 selected records" or "Add 3 selected Leads to a Campaign").

<figure><img src="https://docs.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FrF2S2c2D1QRXUjQz6ulx%252F2023-01-11_20-45-13%2520%281%29.gif%3Falt%3Dmedia%26token%3D1c21a39f-eaae-4d30-aafe-f869000dc774&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=35086c8a&#x26;sv=2" alt=""><figcaption></figcaption></figure>

Enable the pill container using the **Show Pill Container Selected Item** toggle. Requires **Show Pill Container Selected Item** = on for the sub-settings to appear.

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

| Setting         | Description                                                                                                            |
| --------------- | ---------------------------------------------------------------------------------------------------------------------- |
| **Label Field** | The field whose value is displayed on each pill (e.g., "Name" to show record names).                                   |
| **Sortable**    | When enabled, users can drag and drop pills to reorder them within the container.                                      |
| **Single Line** | Forces all pills into a single row with horizontal scroll, keeping the container compact when many items are selected. |

### Filter

The Filter section controls how filter controls are presented to users.

<figure><img src="/files/EdVmvWc4BcY5y3sgMPGb" alt="" width="321"><figcaption></figcaption></figure>

#### Filter Type

Choose the layout for filter controls. Options: **Horizontal** (default), **Popover**, **Panel**.

| Name                                 | Description                                                                                                                                           |
| ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| <h4><strong>Horizontal</strong></h4> | Filters appear in a row directly above the table headers. Ideal for quickly accessing and applying filters without obstructing the view of the table. |
| <h4><strong>Popover</strong></h4>    | Filters are hidden behind an icon or button; when clicked, a floating window appears containing the filter options.                                   |
| <h4><strong>Panel</strong></h4>      | A collapsible side panel (Left or Right) that houses all filter criteria. Configure the panel behavior in the Side Panel section.                     |

#### Use Record Picklist Values

If enabled and the filter is based on a picklist field, filter options are derived from the picklist values present in the current records rather than the field's full defined value set. This prevents users from filtering by values that would return zero results.

#### Use Cascading Filter Values

If enabled, when a user applies a filter, the available options in other filters dynamically narrow down to only reflect the records that match the current selection. Overrides **Use Record Picklist Values**.

#### Pre-filling the Search Box

Use the **Default Search Value** setting (in the Search section) to populate the search box with an initial query when the page loads.

### Search

The Search section configures the search bar that appears above the table.

| Setting                  | Description                                                                                                | Default |
| ------------------------ | ---------------------------------------------------------------------------------------------------------- | ------- |
| **Placeholder**          | Placeholder text displayed in the search bar.                                                              | Search  |
| **Position**             | Where the search bar is displayed: Left, Right, Center, Fill, or Panel.                                    | Left    |
| **Default Search Value** | Text to appear in the search box on page load. The table automatically filters to show only matching rows. | —       |

### Side Panel

The Side Panel section is active when filters or the search bar are configured with the "Panel" position. Configure the panel's behavior here.

| Setting                | Description                                                                                                                     |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| **Position**           | The side from which the panel slides out: Left or Right.                                                                        |
| **Is Closed**          | If enabled, the panel starts hidden when the page loads.                                                                        |
| **Hide Toggle Button** | If enabled, the button that opens and closes the panel is hidden. Use this when you want the panel controlled programmatically. |
| **Label Reset Button** | Custom label for the filter reset button inside the panel.                                                                      |

### Group By

Grouping transforms a flat list of data into a structured hierarchy, aggregating similar records under a single, expandable header. Requires Query data source.

<figure><img src="/files/26KFQfgDbyZtBwZISWgO" alt=""><figcaption></figcaption></figure>

Configure grouping in the **Data Mappings** section (select the Group By field), then refine the display using the settings in the **Group By** panel:

<figure><img src="/files/8oYw5kOr31VNIxjtAWGO" alt="" width="161"><figcaption></figcaption></figure>

| Setting                      | Description                                                                                                   | Default   |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------- | --------- |
| **Hide Undefined Group**     | If enabled, groups with a blank value in the grouping field are hidden entirely.                              | Off       |
| **Undefined Group Label**    | A user-friendly name for records with no value (e.g., "Unassigned"). Requires **Hide Undefined Group** = off. | Undefined |
| **Non Collapsible**          | If enabled, all groups are locked in the expanded state; users cannot collapse them.                          | Off       |
| **Collapsed**                | If enabled, all groups start collapsed on page load. Requires **Non Collapsible** = off.                      | Off       |
| **Display Group Rows Count** | If enabled, a count in parentheses appears next to each group header (e.g., *Status: New (5)*).               | Off       |
| **Show Empty Groups**        | If enabled, group headers are displayed even when there are zero records in that group.                       | Off       |
| **Direction**                | Sort order for group headers: Default, Ascending Order, Descending Order, or Custom.                          | Default   |
| **Group By Custom Order**    | A list of values defining the custom group order. Requires **Direction** = Custom.                            | —         |
| **Linkify**                  | If enabled, the group header becomes a clickable link (applicable only to lookup fields).                     | Off       |

<a href="/pages/8hdirNfwaoNoLfC0bDlb" class="button primary" data-icon="diagram-subtask">Tutorial: How to Configure Grouping</a>

### No Results Message

The No Results Message section controls what the table displays when its data source returns no records.

| Setting                     | Description                                          |
| --------------------------- | ---------------------------------------------------- |
| **No Results Message**      | The message to display when no records are returned. |
| **Hide No Results Image**   | If enabled, the no results illustration is hidden.   |
| **Hide No Results Message** | If enabled, the no results message is hidden.        |

### Set Component Visibility

All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).

## Interactions

[Interactions](/dynamic-components/component-builder/interactions.md) define what happens when users interact with the Data Table. Configure them from the **Interactions** tab of the Edit Data Table panel.

### Header Action Click

Fires when a user clicks one of the table's header action buttons. Use the **targetName** output to identify which header action was clicked and branch your flow logic accordingly.

### Row Action Click

Fires when a user clicks an action in a row's action menu (requires a column set to the Action type). Use the **targetName** output to identify which row action was clicked; the clicked row and its record are also exposed as outputs.

### Row Click

Fires when a user clicks a row (requires **Clickable Row** to be enabled). The clicked row and its underlying record are exposed as outputs so you can navigate to a record page or run any flow logic tied to that row.

### Save

Fires when a user clicks the Save button in the inline-edit footer. Map it to an **Update Records** or **Upsert Records** action to persist the edited rows to Salesforce.

### Cancel

Fires when a user clicks the Cancel button in the inline-edit footer. The component discards its pending draft values; map it to a reset or close action to handle the cancellation.

### File Upload

Fires when a user uploads a file through a File Upload column. The uploaded file names and content document IDs are exposed as outputs so you can react to the attachment immediately.

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

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

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

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% 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="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="Table" %}
Controls the table grid itself.

* **Row Height:** Set the height of each row.
* **Cell Padding:** Adjust the inner spacing of each cell.
* **Border Radius:** Control the roundness of the table corners.
  {% endtab %}

{% tab title="Header" %}
Styles the table header, its border, title, caption, and avatar.

* **Header:** Background color, padding (top, right, bottom, left), and bottom margin.
* **Header Border:** Color, size, style, radius, and the joined-state bottom border.
* **Header Title:** Color, font size, font style, and font weight.
* **Header Caption:** Color, font size, font style, and font weight.
* **Header Avatar:** Background color, foreground color, and border radius.
  {% endtab %}

{% tab title="Pill Container" %}
Styles the pills and pill container used in cells (e.g. multi-value fields).

* **Pill:** Background, text, and border colors (with hover and focus states), border size, style, radius, shadow, line height, and inner spacing.
* **Pill Container:** Background color, border color, radius, and spacing.
* **Action:** Background, border, and text colors for the pill action.
  {% endtab %}

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

* **Image Object Fit:** Control how an avatar image fits its frame.
  {% endtab %}

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

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

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

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

{% tab title="Group By Section" %}
Styles the headers of grouped (Group By) sections.

* **Background Color:** Set the section header background.
* **Icon Color / Icon Color Hover:** Set the expand/collapse icon color.
* **Text Color:** Set the section header text color.
* **Font Size / Font Style / Font Weight / Font Family:** Control the section header typography.
  {% endtab %}

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

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

## Output Variables

The Data Table exposes these output variables you can reference elsewhere on the page after the user interacts with it.

### Row Selection

When a user selects one or more rows, these variables update with the current selection.

| Output variable                | Type                           | What it returns                                                                                                |
| ------------------------------ | ------------------------------ | -------------------------------------------------------------------------------------------------------------- |
| **Selected Rows**              | Object                         | All currently selected rows as objects, where each key is a column field name and the value is the cell value. |
| **Selected Rows sObject**      | Record Collection (SObject\[]) | The full Salesforce records for all selected rows. Requires a **Query** or **Variable** data source.           |
| **Selected Rows Key Value**    | Text Collection                | The key-field values (e.g., record IDs) for all selected rows.                                                 |
| **First Selected Row**         | Object                         | The first selected row as an object (field name → cell value). Includes the record's `Id` field.               |
| **First Selected Row sObject** | Record (SObject)               | The full Salesforce record for the first selected row. Requires a **Query** or **Variable** data source.       |

> **Example:** When a user selects an Account row, use **First Selected Row sObject** to populate a record-detail panel beside the table with that Account's fields.

### Row Action Click

When a user clicks an action in a row's action menu, these variables update with the clicked row's data.

| Output variable                      | Type             | What it returns                                                                                                        |
| ------------------------------------ | ---------------- | ---------------------------------------------------------------------------------------------------------------------- |
| **Clicked Row Action Name**          | Text (String)    | The name of the row action the user clicked (e.g., `edit`, `delete`).                                                  |
| **Clicked Row Action - Row**         | Object           | The row where the action was clicked, as an object (field name → cell value). Includes the record's `Id` field.        |
| **Clicked Row Action - Row sObject** | Record (SObject) | The full Salesforce record for the row where the action was clicked. Requires a **Query** or **Variable** data source. |

> **Example:** When the user clicks a "Delete" row action, use **Clicked Row Action - Row sObject** to pass the record to a Delete Records action.

### Inline Editing

These variables update when a user commits or discards their edits.

| Output variable           | Type                           | What it returns                                                                                                                                                        |
| ------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Button Save Clicked**   | Boolean                        | `true` when the user clicks the Save button in the inline-edit footer.                                                                                                 |
| **Button Cancel Clicked** | Boolean                        | `true` when the user clicks the Cancel button in the inline-edit footer.                                                                                               |
| **Edited Rows**           | Record Collection (SObject\[]) | The modified Salesforce records, containing the updated field values ready to be passed to an Update Records action. Requires a **Query** or **Variable** data source. |

> **Example:** Wire **Button Save Clicked** as the trigger condition and pass **Edited Rows** to an Update Records action to persist all inline edits in one step.

### Header Actions

| Output variable                | Type          | What it returns                                                                                                            |
| ------------------------------ | ------------- | -------------------------------------------------------------------------------------------------------------------------- |
| **Clicked Header Action Name** | Text (String) | The name of the header action button the user clicked. Use it to branch logic when multiple header actions are configured. |

### File Upload

When a user uploads a file through a File Upload column, these variables update immediately.

| Output variable                             | Type            | What it returns                                                                  |
| ------------------------------------------- | --------------- | -------------------------------------------------------------------------------- |
| **File Uploaded Content Document Ids**      | Text Collection | The Content Document IDs of all files uploaded in the current interaction.       |
| **File Uploaded Names**                     | Text Collection | The file names of all files uploaded in the current interaction.                 |
| **First File Uploaded Content Document Id** | Text (String)   | The Content Document ID of the first file uploaded.                              |
| **First File Uploaded Name**                | Text (String)   | The file name of the first file uploaded.                                        |
| **File Upload Row Key Value**               | Text (String)   | The key-field value (e.g., record ID) of the row in which the file was uploaded. |

> **Example:** After a file upload, use **File Upload Row Key Value** to identify the parent record, then use **First File Uploaded Content Document Id** to link the file to a related list or display a preview.

### Others

| Output variable             | Type   | What it returns                                            |
| --------------------------- | ------ | ---------------------------------------------------------- |
| **Number of Items**         | Number | The total number of records currently loaded in the table. |
| **Number of Selected Rows** | Number | The count of rows currently selected.                      |


---

# 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/dynamic-components/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.