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.

Data Table Tutorials

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.

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.

Learn more about the Query Data Source

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.

Learn more about the Variable Data Source

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.

Learn more about the Manual Data Source

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.

Select a Source Field

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

Edit Column Label (optional)

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

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.

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.

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.

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

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.

Best Practice: 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.

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.

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

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.

Step 2: Enable the Save Logic (Interaction Level)

Important: 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.

Tutorial: How to create an "On Save" interaction

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.

Tutorials

Tutorial: How to make a field editable Tutorial: How to Enable Bulk Editing

Configuring Interaction Triggers

The Avonni Data Table uses Interactions 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.

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").

Tutorial: How to Create Header Actions

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

Tutorial: How to Add Clickable Buttons

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.

Tutorial: How to create an "On Save" interaction

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.

Visual Identity & Context

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

• Title: The primary name of your Data Table (e.g., "Active Opportunities"). A clear title ensures users immediately understand the content.

• Caption: A secondary line of text below the title. Use this for brief instructions or to display metadata (e.g., "Filtered by 'New' status").

• Avatar: An icon placed next to the title. This serves as visual shorthand for the object (e.g., the "Standard: Opportunity" icon).

• Is Joined: Enabling this removes the border between the header and the table body. This creates a modern, "seamless" look that makes the header feel like an integrated part of the table rather than a separate box.

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.

• 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

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.

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

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.

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

Tutorial: How To Configure Search

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.

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

By enabling "Hide Picklist Empty Values," the table becomes "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

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.

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.

Tutorial: How to Configure Grouping

Customizing the Group Display

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

• 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 when it loads. If set to True, all groups start closed, providing a high-level summary that allows users to expand only the specific 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

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

• Pro-Tip: 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 without the user having to scroll to find it.

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

• 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 reaches the bottom of the scrollable area, the table automatically fetches and reveals 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 in the list.

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 simply by passing a list of Record IDs into a property. Row selection is a consequence of the initial data provided to the table and the user's direct actions