# Data Table

## Overview

The Avonni Data Table is designed to display Salesforce data in a structured, actionable format. Built on the standard Salesforce Lightning Data Table, it extends functionality with advanced filtering, inline editing, and additional layout controls.

***

## Foundation & Data Setup

### Quick Start

Follow these four steps to get your Data Table up and running.

<details>

<summary><strong>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>

<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/lCzGZO3U0xFHkDUloOHm">/files/lCzGZO3U0xFHkDUloOHm</a></td></tr></tbody></table>

***

### Connecting Your Data

Before you can design the visual layout, you must establish the "Source of Truth" for your table. This specifies which Salesforce records or static values to display in the Data Table.

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

#### **Query**&#x20;

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 hand-type static rows of data 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>

***

### Defining Column Structure & Field 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>

### Visualizing Your Information (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 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.

#### Enhanced Visual Components

* **Badge**: Wraps text in a colored pill (e.g., Green for "Completed", Red for "Overdue").
* **Progress Bar**: A horizontal bar representing a value from 0 to 100.
* **Avatar/Image**: 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**: Creates a link that navigates users directly to the related Salesforce record.
* **Action**: A dedicated slot for "Row Actions" like *Edit* or *Delete* buttons.
* **File Upload**: Adds an upload button directly in the cell, letting users attach files to the row's Salesforce record. Files are stored as Content Documents

{% 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 %}

***

### Defining Column Structure & Field Mappings

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>

These settings empower users to find, organize, and modify data directly within the grid.

<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-crucial-for-data-persistence"><strong>On Save interaction</strong></a> in the next step.</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.

#### Column Resizing

Control whether users can manually resize columns and by how much.

| Setting                    | Description                                                                                                                              | Example                                                                                           |
| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
| **Resize Column Disabled** | When enabled, users cannot drag column borders to adjust width. Default: off.                                                            | Enable this in read-only reports where column width must stay consistent.                         |
| **Resize Step**            | The pixel increment for column resizing. Restricts dragging to specific intervals (e.g., 10px at a time) rather than free-form resizing. | Set to `10` to snap column widths to 10-pixel increments. Useful for maintaining a grid alignment |

***

## Interactivity & Logic

### Configuring Inline Editing

**Inline editing** is one of the most powerful features of the Data Table, allowing users to update Salesforce records directly from the grid. Because the Avonni Data Table is built on the native Salesforce framework, enabling this is a two-step process.

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

First, you must specify which columns are allowed to be modified.

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 now 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 is a game-changer for enforcing business rules directly within your UI. Instead of blocking an entire column, the table intelligently enables or disables the "**pencil icon**" based on the specific data in that row.

**Learn more**
{% 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. This ensures that clicking the "Save" button in the table footer commits the changes to your records.

<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>&#x20;

#### Editing Modes

You can customize how the editing interface appears in the General Properties section:

* 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>&#x20;

***

### Configuring Interaction Triggers

The Avonni Data Table uses [**Interactions**](/dynamic-components/component-builder/interactions.md) to map user behaviors (e.g., button clicks) to specific Salesforce workflows. You define these "logic bridges" in the **Interactions Tab** by choosing a trigger and assigning it an action.

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

There are four primary event triggers available:

#### **Header Action Click (Table-Wide)**

These are buttons located at the very top of your table (e.g., "New Lead" or "Export").

* **Setup**: Define the buttons in the Header section of the Properties panel, then map their logic here (e.g., "Open a Flow" or "Navigate to a URL").

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

#### **Row Action Click (Record-Specific)**

These actions appear on every single row, usually in a dropdown menu at the end.

* **Setup**: Requires a column set to the Action data type.
* **The Result**: Allows users to perform tasks on a specific record, such as "Delete this Record," "Clone," or "Submit for Approval."

<a href="/pages/zfUiqAeWwLCg9ukbw6nd" class="button primary" data-icon="computer-mouse-button-right">Tutorial: How to Add Clickable Buttons</a>

#### **On Save (Data Persistence)**

Simply enabling "Editable" on a column does not save data to your database.

* **The Action**: Map the On Save event to the Update Records action.
* **The Result**: When the user clicks the "Save" button in the table footer, their changes are committed to Salesforce.

<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>&#x20;

#### **On Cancel**

* **The Action**: Usually mapped to a "Reset" or "Close" action.
* **The Result**: Discards any unsaved changes and returns the table to its original state, hiding the editing footer.

***

### Customizing the Header & Global Actions

The header is more than just a title; it is a functional area where you can define branding and global utilities that affect the entire dataset.

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

#### Visual Identity & Context

Use these settings to help users identify what they are looking at:

| Setting                     | Description                                                                                                                         | Example                                                                                                          |
| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| **Header Avatar**           | An icon or image to display next to the table title. Accepts emoji or an image URL.                                                 | Use `{!$SObjectType.Opportunity.smallIconUrl}` to show the Opportunity object icon.                              |
| **Header Is Joined**        | When enabled, removes the visual border between the header and the table body, creating a seamless "integrated" look. Default: off. | Enable for a modern, connected appearance. Disable for a distinct, separated header section.                     |
| **Visible Actions Buttons** | The maximum number of header action buttons to display directly in the header. Additional buttons move to a "More" dropdown menu.   | Set to `3` to show three buttons, tucking the rest into a menu. Prevents header overcrowding on smaller screens. |

#### Managing Global Action Buttons

Header actions are buttons used for tasks that aren't specific to a single row (e.g., "New Lead," "Export to CSV," or "Refresh Table").

* **Defining Actions**: Add the buttons you need here.

{% hint style="warning" %}

#### Note

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

* **Visible Actions** (The Overflow Menu): This controls how many buttons appear directly in the header. If you have 5 actions but set "Visible Actions" to 3, the first three buttons will be visible, and the remaining two will automatically be tucked into a "More" dropdown menu. This prevents the header from becoming cluttered on smaller screens.
* **Hide Actions**: Use this to remove the action menu entirely from the header without deleting your configured interactions.
* **Disable Actions**: This keeps the action buttons visible but renders them "grayed out" and unclickable. This is useful when you want to show users that actions exist but are currently unavailable (e.g., in a read-only mode).

***

### Pill Container <a href="#pill-container" id="pill-container"></a>

The Pill Container is particularly useful for bulk-action workflows (e.g., "Delete 5 selected records" or "Add 3 selected Leads to a Campaign"). It turns a checklist into an easy-to-read list of items.

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

#### How to Configure the Pill Container

You can enable this feature in the Pill Container Options section of the Properties Panel.

* **Label Field**: This is the most important setting. It determines which field’s value is displayed on the pill. For example, if you select several Opportunity records, you would likely set the Label Field to "Name" so the pills show the names of those specific deals.
* **Sortable**: When enabled, users can manually drag and drop the pills to reorder them within the container. This is helpful if the order of selection matters for a subsequent process (like a sequential approval Flow).
* **Single Line**: If a user selects 20 items, the pill listlist of pills can become quite large. Enabling Single Line keeps the container compact by forcing all pills into one row with a horizontal scroll, preventing the table from being pushed down the page

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

***

### Controlling Row Selection

The Data Table provides fine-grained control over which rows users can select, allowing you to enforce business rules directly in the UI.

#### **Row Selection Limits**

| Setting               | Description                                                                                                                                       | Example                                                                                                                       |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| **Max Row Selection** | Restricts the maximum number of rows a user can select at once. Leave blank or set to zero to allow unlimited selection.                          | Set to `5` to prevent users from selecting more than 5 records for bulk operations. Useful for batch actions with API limits. |
| **Clickable Row**     | When enabled, clicking anywhere on the row selects it (in addition to the checkbox). When disabled, only the checkbox is clickable. Default: off. | Enable this for mobile-friendly interfaces or when you want larger click targets.                                             |

#### **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 ("Please select minimum 1 row.") and prevents the user from proceeding

***

## Data Management & Optimization

### Search & Advanced Filtering

The Data Table provides a professional-grade filtering suite to help users navigate large datasets. While Search enables keyword discovery, Filters let users drill down into specific data segments using picklists, dates, or checkboxes.

#### 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.&#x20;

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

#### Filter Layouts

You can customize how these filters are presented to the user based on your page layout and the number of filters you plan to use. These options are found in the Filter Section of the Properties Panel.

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

**Horizontal**

Filters appear in a row directly above the table headers.

**Popover**

Filters are hidden behind an icon and remain hidden until clicked, after which they appear in a floating window.

**Side Panel**

A collapsible panel (Left or Right) that houses all filter criteria.

**Hide Picklist Values**

Enabling "Hide Picklist Empty Values" makes the table "smart." If your current data contains only "Active" and "Pending" records, the filter will hide the "Closed" and "Expired" options. This prevents users from filtering by values that would return zero results.

#### Pre-filling the Search Box

Use the **Default Search Value** setting to populate the search box with an initial query when the page loads. This is useful for filtered views or when you want to guide users toward specific content.

| Setting                  | Description                                                                                                | Example                                                                                                        |
| ------------------------ | ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| **Default Search Value** | Text to appear in the search box on page load. The table automatically filters to show only matching rows. | Set to `"Open"` to show only open Opportunities on page load. Users can clear this and search for other terms. |

***

### Grouping Data

Grouping transforms a flat list of data into a structured hierarchy, aggregating similar records under a single, expandable header. This layout makes it much easier for users to digest large datasets, spot trends, and navigate categories such as **Status**, **Region**, or **Account Name**.

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

To enable this feature, navigate to the **Data Mappings** section in the Properties Panel, select the field you wish to use as your "Group By" in the Group By option attribute.

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

#### Customizing the Group Display

Once grouping is active, you can refine the visual experience using these functional settings:

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

* **Hide Undefined Groups**: If some records have a blank value in your grouping field, the table will naturally create a group for them. Enable this setting to hide those "blank" groups entirely if those records are not relevant to the current view.
* **Undefined Group Label**: Instead of leaving the header empty or showing "Undefined," you can provide a user-friendly name for records with no value. Common examples include "Unassigned," "N/A," or "Miscellaneous."
* **Non-Collapsible**: By default, users can expand and collapse groups. Enabling this locks all groups in the expanded state. This is useful when you want to ensure all data is always visible and prevent users from accidentally hiding rows.
* **Collapsed**: This setting determines the table's initial state upon loading. If set to True, all groups start closed, providing a high-level summary that lets users expand only the categories they need to see.
* **Display Group Row Counts**: This adds a numeric count in parentheses next to each group header (e.g., *Status: New (5)*). This gives users an instant view of the number of records in each category without requiring manual counting.
* **Show Empty Groups**: This option forces the table to display headers for values that exist in your picklist or data source, even if there are currently zero records associated with that value. This helps maintain a consistent table structure for reporting.
* **Direction**: Controls the sort order of the group headers. You can set the headers to appear in Ascending (A-Z), Descending (Z-A), or a Custom order based on your specific business requirements.
* **Linkify**: If you are grouping by a Lookup field (such as Account Name or Project Owner), enabling this converts the group header into a clickable link. This allows users to jump directly to the related Salesforce record with a single click.

***

### Optimizing Data Navigation (Pagination & Scrolling)

When dealing with more than 20–30 records, displaying everything at once can overwhelm users and slow down the page. Choosing the right navigation style depends on whether you want users to "flip" through pages or "scroll" through a list.

**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 "**Items Per Page**" field, the table adopts a "load-on-demand" behavior.

* The Experience: After the first batch of records is displayed, a "Show More" button appears at the bottom. Clicking it adds the next batch of records to the current list, similar to a social media feed.

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

* **How it works:** Instead of the table growing longer as more data loads, you set a Fixed Height for the table. The table header stays pinned at the top, and the user scrolls through the data within that specific "window."
* **The Experience**: As the user scrolls to the bottom of the scrollable area, the table automatically fetches and displays the next set of records. This is ideal for dashboards where you want to keep the table size consistent regardless of the number of records or rows.

***

### Mobile Responsiveness & Limitations

#### Mobile Strategy

The standard Salesforce `lightning-datatable` base has limited responsiveness on small screens. To optimize for mobile:

* **Option A**: Create a simplified Data Table with fewer columns and use Salesforce Component Visibility to show it only on mobile.
* **Option B**: Use the Avonni List component for mobile users, which is natively responsive, and show the Data Table only on Desktop.

#### Row Pre-selection

Managing which rows are "checked" or highlighted is handled through data and interaction rather than a simple ID property.

* **Manual Interaction**: By default, row selection is driven by the user clicking checkboxes within the table.
* **Programmatic Limitation**: Note that the component does not support pre-selecting rows by simply passing a list of Record IDs to a property. Row selection is a consequence of the initial data provided to the table and the user's direct actions

***

## Common Issues and Solutions

### **Issue: Inline Edits Are Not Saving**

**Problem:** User edits a cell, clicks Save, but the value does not change in Salesforce.

**Cause:** The On Save interaction was not configured, or it does not include an Update Records action.

**Fix:**

1. Select the Data Table.
2. Open the **Interactions** tab.
3. Find the **On Save** trigger.
4. Ensure an **Update Records** action is configured.
5. Verify that the action maps edited field values to the correct Salesforce fields.
6. Test by editing a single cell and saving.

***

### **Issue: Row Grouping Shows Duplicate Records**

**Problem:** When grouping by a field, some records appear in multiple groups or the count seems incorrect.

**Cause:** The **Group By Field API Name** may contain blank or null values, creating unexpected group headers.

**Fix:**

1. In the Data Table properties, enable **Hide Undefined Groups** to hide groups with null/blank values.
2. Or, set a user-friendly label for undefined records using **Undefined Group Label** (e.g., "Unassigned").
3. Verify that your data source does not include duplicate records.

***

### **Issue: Search Box Is Empty but Should Have Default Text**

**Problem:** The search box does not populate with the **Default Search Value** on page load.

**Cause:** The value may be set, but the search is not triggered automatically, or the user may have cleared it.

**Fix:**

1. Verify the **Default Search Value** is not empty.
2. Check that the searched fields are set correctly in **Data Mappings** (toggle **Searchable** for the fields you want included).
3. If the value should persist even after the user clears it, configure a Flow or interaction to reset it on page load.

***

### **Issue: Header Actions Are Hidden in a Dropdown Menu**

**Problem:** Only two buttons appear in the header; the third button is in a "More" menu.

**Cause:** **Visible Actions Buttons** is set to a lower number than the total action count.

**Fix:**

1. Select the Data Table.
2. Open the **Properties Panel**.
3. Find **Visible Actions Buttons** and increase the number (e.g., from 2 to 5).
4. Save and preview the page.

***

### **Issue: Row Selection Limit Is Enforced, but Message Doesn't Display**

**Problem:** User tries to select more than the **Max Row Selection** limit, but no warning appears.

**Cause:** The component prevents additional selections silently without displaying an error message.

**Fix:**

1. Configure an On Selection Change interaction (if available) to display a toast message when the limit is reached.
2. Or use the Pill Container to visually show selected rows, making the limit obvious to the user.
3. Test by selecting rows up to the limit and verifying the checkbox becomes disabled for further selections


---

# Agent Instructions: 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.