Data Table
Last updated
Last updated
The Data Table is also available as an Experience Cloud Component.
The Avonni Data Table is a powerful tool for showing and managing data in a table format within your Salesforce. It's like a supercharged spreadsheet you can customize and interact with in many ways.
Learn how to fully utilize the power of the Avonni Data Table, an excellent component for managing and displaying data within Salesforce.
Take your Data Tables to the next level with these handy tips and tricks.
Add Clickable Buttons
Show or Hide Columns Based on Conditions
How to color-code Badges
How to Grayscale Header Actions Dynamically
How to refresh the Data Table by pressing a button
How to use formulas in Text Fields
How to send multiple Record IDs to Another Flow
🎥 7 Tips and Tricks on the Avonni Data Table
For more in-depth examples of how to use the Avonni Data Table, check out our reactive query tutorials. These tutorials will show you how to create more interactive and dynamic projects using the Data Table component.
Reactive QueryThe first step in configuring the Avonni Data Table is establishing the Data Source. This crucial element determines the origin and organization of your data within the table. By defining the Data Source, you set which data to display and how it's structured, ensuring the table functions correctly and meets your specific requirements for data presentation.
Available Data Sources
Manual
Ideal for static or predefined data.
Variable
Great when your table data is linked to variable collections in your flow.
Query
Perfect for tables reflecting dynamically changing data or real-time updates.
Why Is Configuring the Data Source Important?
Accuracy of Data: Ensures that the data table reflects the correct and current information per your business needs.
User Experience: An adequately configured data source contributes to a more intuitive and efficient user experience, as the data displayed is relevant and organized.
Flexibility and Customization: Different data sources offer varying levels of flexibility and customization, allowing you to tailor the data table to specific use cases.
The Data Mappings feature in the Avonni Data Table Component is essential for correctly displaying data in your table.
In this section, you'll learn how to:
Set up data mappings: Connect your Salesforce data to the columns in your table.
Display fields from related records: Show information from lookup relationships (e.g., display the Account Name on a table of Contacts).
This configuration is essential for ensuring your data is displayed accurately and effectively. There are two straightforward methods to add columns to your data table through Data Mappings:
Drag-and-Drop Method:
The fields available for mapping will vary based on your chosen data source—either a variable from 'Get Records' or an object in 'Query' mode. Here's how the process works:
For Variable Data Source: Once you select the 'Get Records' variable that you wish to associate with the data table, a list of Salesforce fields from this variable will appear on the left side of the Data Table interface.
For Query Data Source: Use the Query mode to select the corresponding Salesforce object. The relevant fields of that object will be displayed on the left.
Adding to Table: After displaying the fields, you can drag them from this list and drop them onto the data table canvas to add them as columns.
Using the 'Add Columns' Button:
Location: Locate the 'Add Columns' button in the right panel within the Data Mappings section.
Process: Clicking this button allows you to select from the available Salesforce fields and add them as columns to your data table.
The Avonni Data Table lets you show information from related records, like displaying the Account Name on a table of Contacts. This uses a "lookup relationship."
Here's how to add fields from a lookup relationship:
Use the Query: Ensure your Data Table is set to use the "Query" data source. This lets you work with related records.
Add a Column:
Go to the "Data Mappings" section.
Click "Add Columns" or drag a field from the left-hand side.
You'll see a list of fields in the "Source Field" dropdown. Fields with a > symbol next to them are from lookup relationships. Choose the field you want to display (e.g., Account > Name to show the Account Name).
Example: To display the Account Type on an Opportunity table, you would:
Choose "Query" as the data source.
Select the "Opportunity" object.
Add a column:
Go to the "Data Mappings" section.
Click "Add Columns" or drag a field from the left-hand side.
In the "Source Field" dropdown, find and select Account > Account Type.
The Avonni Data Table lets you tailor how your data is shown. Here's how to customize your table columns:
Each column linked to your Salesforce data is listed in the Data Mappings section.
Click on a column in this section to open its settings.
The settings panel gives you control over various aspects of the chosen column.
Here, you can change things like:
Width: How wide the column is.
Alignment: Whether text is aligned left, right, or center.
Sorting: Whether users can sort the data by that column.
Text Wrapping: How text wraps within the column.
You can customize each column based on the type of data it shows. For example, a date column might need different formatting than a currency column.
For number-based columns like currency or percentages, you can precisely control the display of numeric values using the following attributes:
Minimum Fraction Digits: Sets the minimum number of digits to display after the decimal point.
Maximum Fraction Digits: Sets the maximum number of digits to display after the decimal point.
Minimum Integer Digits: Ensures a minimum number of digits before the decimal, even for small values.
Step Size: Defines the allowed increments for the number, which can help restrict input or control how values are rounded.
Example:
Let's say you have a column showing product prices. You want to ensure all prices are displayed with two decimal places, like $12.34. Within the column settings, you would:
Locate the Minimum Fraction Digits setting.
Set it to "2".
Locate the Maximum Fraction Digits setting.
Set it to "2".
This ensures consistency and clarity in how your numeric data is presented in the Data Table.
For columns containing currency data, you have additional formatting options to ensure accurate and locale-appropriate display:
Value Display As: Controls how the currency value is presented.
default: Uses the standard Salesforce currency formatting for the user's locale.
converted: Displays the value converted to the user's currency.
formatted: Applies specific formatting rules (using the other currency attributes).
formatted and converted: Combines formatting and currency conversion.
Currency Code: Specifies the currency code (e.g., USD, EUR, GBP) for display or conversion.
Currency Display As: Determines how the currency symbol is shown (e.g., symbol only, code only, symbol and code).
Minimum Integer Digits: Ensures a minimum number of digits before the decimal point (e.g., 001.23).
Minimum Fraction Digits: Sets the minimum number of digits after the decimal (e.g., 12.30).
Maximum Fraction Digits: Limits the number of digits after the decimal (e.g., 12.34, not 12.3456).
Minimum Significant Digits: Controls the minimum total number of significant digits displayed.
Maximum Significant Digits: Limits the total number of significant digits.
Step: Defines the allowed increments for the currency value (e.g., can only be changed in steps of 0.01).
Example
To display a price in Euros with the symbol and always showing two decimal places:
Set Value Display As to "formatted."
Set Currency Code to "EUR."
Set Currency Display As to "symbol."
Set Minimum Fraction Digits to "2."
Set Maximum Fraction Digits to "2."
Using these attributes, you can ensure that currency values in your Avonni Data Table are presented accurately and in a way that aligns with your users' locale and preferences.
Use the Type setting to change how data appears in the column.
Want to highlight important words with colorful badges? Choose the Badge type.
Need to show progress visually? Choose the Progress Bar type.
Controlling Decimal Places in Currency and Percent Fields
When working with currency or percentage data in your Data Table, you might need to control how many decimal places are displayed or allowed during editing. Here's how you can do that:
Adjusting Decimal Places for Editing:
In the column settings for your currency or percent field, you can use the step attribute to control how much the value changes with each increment or decrement. Here's how it works:
step: 0.01 (default): Allows two decimal places (e.g., 123.45).
step: 0.001: Allows three decimal places (e.g., 123.456).
step: 1: Allows only whole numbers (e.g., 123).
Controlling Displayed Decimal Places:
You can also control how many decimal places are shown in the Data Table (even if they're not editable) using the minimumFractionDigits and maximumFractionDigits attributes.
Important Note: These settings are specifically for number-based fields like currency and percent that may involve decimal values.
Displaying Rich Text Fields
Select the 'Rich Text' type in the column settings to display rich text formatting correctly in your Data Table. This ensures any bolding, italics, lists, etc., from your Salesforce rich text field, will appear as intended in the table.
To make a field required in your Avonni Data Table, create a validation rule for that field within your Salesforce organization. The Avonni Data Table automatically honors any validation rules you've set up. This ensures data integrity by enforcing required fields during data entry or modification.
In summary, the Data Mappings feature in the Avonni Data Table doesn't just link your Salesforce data to the table columns; it also allows you to customize how each column functions and appears.
Inline editing lets users update data directly in your Data Table, making it more user-friendly.
A pencil icon appears next to the data when you activate inline editing for a field. Users click the icon to edit.
For even faster edits, choose "Display as Input." This transforms the field into an editable input box, eliminating the need for extra clicks.
Inline Editing: Ideal for occasional edits or to indicate which fields can be modified.
Direct Cell Editing: Perfect for frequent updates or streamlining data entry tasks
Adding inline editing to fields in the Avonni Data Table is efficient and user-friendly. However, it's crucial to remember the most critical aspect of this functionality.
This step is critical for making inline editing functional. So, as you enhance your data table with inline editing capabilities, always integrate a save interaction to capture and store user modifications seamlessly. 👇
Here's the list of all the supported objects for the inline editing.
Row Actions enhance user engagement by providing a dropdown menu with additional options upon clicking a row. They offer a practical and interactive way to manage and interact with the data presented in the table.
After you create row actions, they won't do anything yet. To make them functional, you need to set up interactions.
Example:
You've added a "Delete Row" action to your Data Table. To make it work, you'd create an interaction that targets that "Delete Row" action. This interaction could open another flow that handles the actual deletion of the record when the user clicks "Delete Row."
Key takeaway: The first step is creating the row action button. Adding an interaction to that button makes it perform the desired action.
The "Group By" feature categorizes your data within the table. This makes it easier to analyze and understand, especially when working with large datasets.
Choose Your Grouping Column: Select the column that contains the values you want to group your data by (e.g., "Region," "Product Type," etc.).
Automatic Grouping: The Data Table instantly organizes your data, creating sections based on the unique values in your chosen column.
Example: If you group by "Language," you'll see sections for each distinct language, with all related data neatly grouped within those sections.
To activate the Group By feature in your Avonni Data Table, follow these steps:
Open Component Builder: Launch the Avonni Data Table component builder in your Salesforce environment.
Scroll to Group By Setting: Navigate to the bottom of the settings panel within the component builder.
Select Group By Field:
You'll find a designated field labeled 'Group By'.
Choose the field from your data set to group the data in the table.
The Group By section in the Avonni Data Table offers a range of settings to customize how grouped data is displayed and interacted with.
Here's a brief overview of the available options:
Hide Undefined Label
Hides groups labeled as 'undefined'.
Undefined Group Label
Sets a custom label for undefined groups.
Non Collapsible
Makes grouped sections non-collapsible.
Collapsed
Starts groups in a collapsed state.
Display Group Rows Count
Shows the count of rows in each group.
Show Empty Groups
Displays groups even if they have no data.
Direction
Specifies the direction of the order of the group by.
Linkify
Makes lookup values clickable for quick navigation
You have complete control over the order in which your data is grouped. Here's how to adjust it:
Direction Options: Choose from default, ascending, descending, or custom order.
Custom Order: For maximum flexibility, select "Custom." This allows you to rearrange and remove grouping values, tailoring the display to your needs.
When enabled for lookup fields in the Group By column, this option turns the group header into a clickable link. Clicking the link will navigate you directly to the record detail page of the associated lookup object.
Hide Table Header
Hides the table header when enabled.
Wrap Table Header
Long column headers automatically wrap up to 3 lines, preventing clipped text and improving readability.
Hide Checkbox Column
Removes the checkbox column used for row selection.
Show Row Number Column
Displays row numbers in the first column if enabled. NOTE: The Avonni Data Table uses Salesforce's standard Data Table as its foundation. Because of this, if you turn on "inline editing" (allowing users to edit data directly in the table), row numbers will automatically appear. This is how Salesforce has designed it, and we can't change that behavior.
Required
Makes row selection mandatory for users.
Max Row Selection
Sets the maximum number of rows that can be selected.
Suppress Bottom Bar
Hides the footer with Save and Cancel buttons during inline editing.
Show Number of Items Selected
Displays the count of selected items if enabled.
Read Only
Prevents editing of records, making the table read-only.
The Avonni Data Table is built on Salesforce's Lightning Data Table. The Lightning Data Table has limited responsiveness and may not automatically adjust to smaller screens. To optimize the Data Table for mobile devices, consider these options:
Create a separate Data Table for mobile: Build a simplified one with fewer columns specifically designed for mobile users. Use Salesforce's component visibility settings to display this mobile-friendly table only on smaller screens.
Use the Avonni List component: For a more responsive solution, consider using the Avonni List component. This component has built-in responsive settings that adjust the display based on screen size. Combine this with Salesforce's component visibility settings to show the List only on mobile devices.
The header is the top row of your Data Table. Use the Header section to customize its appearance and add functionality.
Title: Give your Data Table a clear and descriptive title. This helps users understand the table's content at a glance.
Caption: Add a short description or extra information below the title to provide context or details about the data.
Icon: Include an icon in the header to make it more visually appealing or to represent the table's purpose.
Is Joined: This option removes the bottom border of the header, making it blend seamlessly with the rest of the table or other components.
Actions: Add buttons to your header to give users quick access to common actions, like creating a new record or exporting data. You can customize these actions in the "Interaction" tab.
Visible Actions: Control how many action buttons are shown directly in the header. The rest will be placed in a dropdown menu if you have more actions than you want to show. For example, if you have 4 actions but set "Visible Actions" to 2, only the first 2 buttons will be shown directly.
Hide Actions: Completely hide the action menu in the header.
Disable Actions: Make the action menu inactive (grayed out) but still visible in the header
Column widths can be customized if needed. By default, all columns have min and Max values set in pixels.
Column Widths Mode
Specifies how column widths are calculated.
- Fixed: Equal widths for all columns. - Auto: Widths based on content and table width. Default is 'fixed'.
Max Column Width
Sets the maximum width for all columns.
Prevents columns from becoming too wide.
Min Column Width
Establishes the minimum width for all columns.
Ensures columns don’t become too narrow, affecting readability.
Wrap Text Max Lines
Specifies the max number of lines before truncating the content.
Content is cut off and shown with an ellipsis after the set number of lines. Must be 1 or more.
Resize Column Disabled
Disables manual column resizing.
Useful for maintaining consistent column widths.
Resize Step
Width adjustment amount when resizing columns with arrow keys.
Allows for fine-tuned column width adjustments.
SET COLUMN WIDTH INDIVIDUALLY
Column width can be set individually for each column as follows:
Go to the Data Mappings section
Click on a column
Scroll down completely and click on "Advanced Option"
You can set the sorting options for columns. The default sorting direction is applied to sorted columns.
Each column can be sortable by activating the sortable toggle directly from the column properties.
The Pagination section lets you activate Pagination for your datatable.
Here's how to add pagination on your datatable:
From the Properties Panel, expand the Pagination Options section
Check the "Show Pagination" toggle
Enter your desired number of items per page
Adjust other settings like:
Pagination alignment
Buttons icon and label
Activating the Pill Container option will display selected items in a pill container. Pills can be sorted and displayed in a single line by activating the appropriate option.
The Label Field attribute displays the pill name by the selected field.
Label Field
Determines the field name used for the pill label.
Sortable
Enables sorting within the pill container.
Single Line
Restricts the pill container to a single line.
The Avonni Data Table makes it easy for users to find the information they need by applying filters to the data. You have several options for setting up filters:
Directly on the Table (Canvas): Apply filters directly to the Data Table.
In Component Settings (Properties Panel): Customize filter settings within the component's properties.
Quick Filtering: Enable filtering on all columns by default for a faster setup.
Hidden Columns: You can even filter data based on columns that aren't visible in the table.
Each method gives you control over how users can refine their view of the data.
On the Data Table header, click on the arrow next to the column name you want to make editable.
Click on "Allow Filtering" to make that field searchable.
Go to the Data Mappings section
Click on the column of the field you want to make searchable
Scroll down and toggle the Filterable attribute.
Want to make all columns filterable by default? The Avonni Data Table makes it easy:
Click the "All columns settings" button.
Click on the filterable option.
With just two clicks, you'll activate default filtering capabilities for every column in your Data Table
In the Data Mappings section, you can use specific fields as filters for other fields that aren't visible as columns. It allows you to add extra filters to your data without having to clutter your Data Table with additional columns. Essentially, you can filter data behind the scenes without changing the appearance of your Data Table.
The Avonni Data Table offers three filtering options typ, each designed to accommodate different user preferences and screen sizes.
Horizontal
These filters appear directly above the data table, laid out in a horizontal row.
Popover
This option allows filters to be hidden behind clickable icons or buttons; when clicked, a small, floating interfac appears, containing the filter options.
Side Panel
Filters in a side panel are located to the left or right of your data table, accessible through a panel that can be expanded or collapsed.
Open the Component Builder
Scroll down to the Filter section.
Select how you'd like to display filters.
When configuring your Avonni Data Table component to use a "Panel" filter, you can present filtering options in a convenient side panel. This panel offers additional customization settings, described below:
Position (Left, Right):
This setting determines whether your filter panel slides out from the screen's left or right side when a user interacts with the filter.
Is Closed:
This option controls the initial state of the filter panel.
Set "Is Closed" to "True" if you want the filter panel to start hidden. This is useful when you initially want to emphasize the data table content.
Set "Is Closed" to "False" if you want the filter panel to be open by default, prompting users to customize their data view immediately.
Hide Toggle Button:
It indicates whether a toggle button is visible when manually opening and closing the filter panel.
Set "Hide Toggle Button" to "True" if you want the panel to open and close based on other events within your flow (e.g., when a filter icon is clicked).
Set "Hide Toggle Button" to "False" to give users an always-visible toggle button to control the panel.
The Avonni Data Table offers dynamic picklist filters to enhance your filtering experience. When a filter is applied to a picklist field, the filter menu automatically adjusts to show only picklist values currently used by at least one record in your data table. This simplifies the filtering process and prevents users from selecting irrelevant or unused options.
To enable this feature, toggle the "Hide Picklist Empty Values" option to "On" within the Data Table's properties.
The Search Engine options let you configure your search box option. You can customize placeholder text and set the position of your search box. The Search box will appear when at least one field is searchable.
Things to Keep in Mind About Searchable Fields
Lookup Fields:
You can search lookup fields using the Query Data Source option. This means you can use the search box to find records based on the values in your lookup fields.
You cannot search lookup fields using the Variable Data Source option. However, we're working on adding this functionality soon!
Rich Text Fields:
You cannot search rich text fields using the Query Data Source option.
You can search rich text fields using the Variable Data Source option. This allows you to find records based on the content within your rich text fields.
From the Canvas
On the Datatable header, click on the arrow next to the column name you want to make editable.
Click on "Allow Search" to make that field searchable.
From the Properties panel
Go to the Data Mappings section
Click on the column of the field you want to make searchable
Scroll down and toggle the Searchable attribute.
This feature allows users to perform search queries on specific fields in the underlying dataset, even if they are not visible in the table view. It makes it easier to dig into large datasets and retrieve precise information quickly.
Open the Component Builder
Scroll down the properties list to the end
In the Search Fields attribute, select the fields that must be searchable without displaying them in the Data Table.
The 'defaultSearchValue' attribute lets you set a predefined search term in your tables. When the data table loads, it automatically searches using this specified term.
The Avonni Data Table component provides several styling options, allowing you to customize its appearance and seamlessly integrate it into your screen flows.
Margin: Control the space around the entire Data Table.
Padding: Adjust the space between the Data Table's content and border.
Border: You can customize the border's appearance around the Data Table, including its style, width, and color.
Size: Choose from predefined size options or set a custom size for the Data Table.
Row Height: Control the height of each row in the Data Table.
Cell Padding: Adjust the padding within each cell, influencing the spacing between the cell content and its borders.
Header: Customize the appearance of the entire header section.
Header Border: Style the border that separates the header from the table body.
Header Title:
Color: Change the text color of the header title.
Font Size: Adjust the font size of the header title.
Font Style: Choose a font style for the header title (e.g., normal, italic).
Font Weight: Set the font weight of the header title (e.g., normal, bold).
Header Caption: Style the appearance of any caption text displayed within the header.
Header Actions: Customize the appearance of buttons or other interactive elements placed in the header.
Pill Container: Style the container displaying pills or badges in the Data Table.
Avatar: Customize the appearance of avatars displayed within the Data Table.
Pagination Buttons: Style the buttons used for navigating through paginated data.
Footer: Customize the appearance of the footer section, which often contains summary information or additional actions.
Group By Section: Style the section that displays grouping controls, if applicable.
Show More Button: Style the button to reveal additional data, if applicable.
The Interactions panel lets you customize how your Data Table reacts to user input. Here's what different interaction types allow you to do:
Header Action: Define actions when users click the Data Table's header buttons. This could include sorting columns, filtering data, or triggering custom processes within your application.
Row Action: Control what happens when users click the action buttons (if you've configured any) within individual rows of the Data Table. These actions might include opening a record for editing, deleting a row, or initiating related flows.
Save: Determine the actions taken when a user clicks the "Save" button after editing a field within the Data Table. This typically involves updating the underlying data source and providing feedback to the user.
Cancel: Specify what should happen when a user clicks the "Cancel" button while editing a field. This often involves discarding the changes or prompting the user to confirm cancellation.
Complete List of Actions: This page provides a full list of the actions you can add and how to configure them.
Set a specific fixed width for this column.
