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
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:
Manual
Enter data directly into the component configuration.
Variable
This is useful for data that changes based on user interactions or other component logic.
Query
This is the most common option for displaying Salesforce records.
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.
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.
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.
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.
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.
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-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.
Location: Displays a geolocation (latitude/longitude) 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.)
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.
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:
In the Data Mappings section, click on the column you want to use for file uploads.
Change the Data Type to File Upload.
Configure the settings below as needed.
Label
The text on the upload button. Defaults to "Upload File" if left empty.
Accept
Restricts which file types can be uploaded. Enter a list of extensions (e.g., .pdf, .jpg, .png). Leave empty to allow all file types.
File Name Prefix
Text added before the original file name when saving. For example, a prefix of Quote_ renames proposal.pdf to Quote_proposal.pdf.
File Name Suffix
Text added after the file name (before the extension). For example, a suffix of _v2 renames proposal.pdf to proposal_v2.pdf.
Multiple
When enabled, users can select and upload more than one file at a time.
Show File Uploaded
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.
Disabled
Grays out the upload button and prevents interaction.
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.
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.
Sortable
Allows users to reorder the table based on this column's values.
Filterable
Adds the column to the filtering menu for data refinement.
Searchable
Includes the column's content in the global search results.
Editable
Enables users to modify the cell value (requires an On Save Interaction). Note: Enabling "Editable" only changes the UI. To actually save changes back to Salesforce, you must configure an On Save interaction in the Interactions tab.
Alignment
Choose between Left, Center, or Right text alignment.
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.
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.
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.
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.
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.
Export To Fields
When using a Query data source, the Export To Fields setting selects which record fields are included when data is exported from the table (for example via an Export To interaction). Choose one or more fields from the queried object.
Filter Fields
In the Data Mappings section, select which fields are available to end-users as filters. Only the fields you select here will appear in the filter menu.
Search Fields
By default, the search covers all searchable fields you map in the Data Mappings section. Use Search Fields to limit the search to specific mapped fields.
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.
Hide Table Borders
If enabled, the table's cell borders are removed for a cleaner, borderless look. Requires Hide Table Header to be enabled.
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.
Rows Selection Disabled
The key-field values of the rows that should be disabled for selection. Users can view these rows but cannot select them.
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:
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)
Go to the Data Mappings section in the Properties Panel.
Select the specific column you want to make editable.
Toggle the Editable attribute to ON.
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.
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.
Navigate to the Interactions tab.
Select the On Save event.
Add the Update Records action.
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.
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.
Tutorials
Header
The Header section gives you control over the appearance and functionality of the Data Table header.
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.
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.
Column Widths
Control the visual "breathing room" for table columns and how users can resize them.
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.
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
Standard Pagination
Displays "Next/Previous" buttons or page numbers.
Users who need to know exactly how much data exists.
"Show More" Button
Appends a new set of records to the bottom when clicked.
Giving users control over how much data they load.
Infinite Scrolling
Automatically loads more data as the user scrolls down.
High-speed browsing in a fixed-height workspace.
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, so the user doesn't have 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 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.
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").
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.
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 the filter menu is presented to end-users. Filter fields are enabled in the Data Mappings section.
Filter Type
Choose the layout for filter controls. Options: Horizontal (default), Popover, Panel.
Filters appear in a row directly above the table headers. Ideal for quickly accessing and applying filters without obstructing the view of the table.
Filters are hidden behind an icon or button; when clicked, a floating window appears containing the filter options.
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.
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.
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.
Configure grouping in the Data Mappings section (select the Group By field), then refine the display using the settings in the Group By panel:
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
Show Grand Total
If enabled, a grand-total summary row is rendered at the bottom of all groups when one or more columns have Summarize By set.
On
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
No Results Message
The No Results Message section controls what the table displays when its data source returns no records.
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.
Interactions
Interactions 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.
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.
Controls the inner spacing between the table's border and its content.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
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.
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.
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.
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.
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.
Styles avatars rendered in cells.
Image Object Fit: Control how an avatar image fits its frame.
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.
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.
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 Click
When a user clicks a row (with Clickable Row enabled), these variables update with the clicked row's data.
Clicked Row
Object
The clicked row as an object (field name → cell value). Includes the record's Id field.
Clicked Row sObject
Record (SObject)
The full Salesforce record for the clicked row. Requires a Query or Variable data source.
Example: When a user clicks a row, use Clicked Row sObject in a Navigate interaction to open that record's detail page.
Row Action Click
When a user clicks an action in a row's action menu, these variables update with the clicked row's data.
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.
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
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.
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
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.
Last updated
Was this helpful?