Data Table
Overview
The Avonni Data Table is a powerful and versatile component for displaying and managing tabular data within Salesforce applications. It offers the following key features:
Optimized Performance: It is designed to handle large datasets with exceptional efficiency, ensuring smooth scrolling, sorting, and searching operations even when working with vast amounts of information.
User-Friendly Data Interaction: Provides intuitive tools for data navigation and manipulation, making complex data easy to parse and interact with.
Customization: Offers extensive configuration options to tailor the data table's appearance and behavior. These adjustments ensure the component aligns precisely with your data display and workflow requirements.
Tutorials
Learn how to fully utilize the power of the Avonni Data Table, a great component for managing and displaying data within Salesforce. Our detailed tutorials cover:
Customizing the data table's appearance: Tailor the table to match your unique needs.
Interacting effectively with data: Master techniques like sorting, filtering, and searching.
Optimizing performance for large datasets: Ensure a smooth user experience
Key Settings
Simplify your Avonni Data Table experience. This section highlights our best articles on essential settings and options.
Configuration
Data Source
The 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
Data Source Type | Use Case | When to Use |
---|---|---|
Manual | Ideal for static or predefined data. | For tables without the need for updates or dynamic changes, like fixed lists. |
Variable | Perfect for tables reflecting dynamically changing data or real-time updates. | When table data is linked to variable collections in Salesforce, such as Get Records Collection. |
Optimal for managing large data sets with hundreds of thousands of records, and ideal for complex data retrieval from multiple sources or specific criteria. | For tables displaying data from multiple sources or based on complex queries. |
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.
Data Mappings
The Data Mappings feature in the Avonni Data Table Component is essential for correctly displaying data in your table, especially when using variable data sources like Salesforce's 'Get Records' or 'Query' mode. This feature ensures that the data table accurately represents the information from Salesforce and connects specific fields from your Salesforce data to the appropriate columns in the data table.
Setting Up Data Mappings
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.
Columns Configuration
Configuring columns in the Avonni Data Table is key to creating an effective and tailored data display. Here's a straightforward approach to customizing your table columns:
Access Column Settings:
Each column associated with your Salesforce data appears listed in the Data Mappings section.
Customize Column Properties:
The property panel allows you to access various settings for the selected column.
Here, you can adjust various attributes and behaviors of the column, such as its width, alignment, sorting capability, text wrapping, and more.
Tailor Each Column:
This flexibility allows you to tailor each column based on the nature of the data it represents. For instance, a column displaying dates might have different formatting needs than one showing monetary values.
You can also set filters, define editable fields, and adjust visibility settings, ensuring each column functions precisely as needed for your specific use case.
Enhanced Data Representation:
Use customization features to change the way your data is displayed. This makes understanding and working with your data much easier.
Use the '
Type
' in your column settings to control how your data appears on the Data Table. Want to highlight key terms with colorful badges? Need to visualize progress? Choose from options like 'Badge' or 'Progress Bar' for the display that best fits your data.
See a complete list of supported data types for the Data Table below:
Explore More: Further Reading and Resources
pageHow to add Images onthe Data TablepageDisplaying Record Name field as a linkpageDisplaying a Record as a QR CodeIn summary, the Data Mappings feature in the Avonni Data Table doesn't just link your Salesforce data to the table columns; it also opens up a world of customization for how each of these columns functions and appears.
How to make a field editable
Enable direct editing in the Avonni Data Table to streamline data updates and enhance user interaction, significantly improving efficiency and flow responsiveness.
Go to the Data Mapping section
Click on the column of the field you want to make editable
Scroll down and toggle the
Editable
attribute.
Lookup and Record Type fields are editable.
Due to Salesforce API restrictions, fields within the Event and Task objects are not editable. As a result, you won't be able to modify and save field information for these unsupported objects when using the Inline Editing feature in the Data Table.
Here's the list of all the supported objects for the inline editing.
Setting up the save interaction
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 vital for making inline editing functional and reliable. So, as you enhance your data table with inline editing capabilities, always integrate a save interaction to capture and store user modifications seamlessly. 👇
Learn more about making a field editable
Read the tutorial below 👇
pageMaking a field editableHow to set filters
How to make a field filterable
From the Canvas
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.
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
Filterable
attribute.
Set filters for fields that aren't visible as columns.
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.
Row Actions
Row Actions enhances user engagement by providing a dropdown menu with additional options upon clicking a row. Row actions offer a practical and interactive way to manage and interact with the data presented in the table.
Learn more about creating row actions.
Read the tutorial below 👇
pageAdding Row ActionspageHow to create an interaction to open another flowpageEnabling auto-refresh for queries after the Flow Dialog endsGroup By
When utilizing the Group By feature, data is sorted and grouped according to the values of a chosen column. The 'Group By' attribute is defined by selecting a column field name, which becomes the data grouping criterion. For instance, if you choose a 'Language' field, the table will group and display the data based on the different languages available in your dataset.
This organization method is handy for managing large datasets, allowing users to quickly identify and assess data grouped under standard headings.
How to enable it?
To activate the Group By feature in your Avonni Data Table, follow these straightforward 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.
By following these steps, you can effortlessly group data in your Avonni Data Table, making it more organized and more accessible to analyze
Adjust Group By Options
The Group By section in the Avonni Data Table offers a range of settings to customize how grouped data is displayed and interacted with. This section is handy for tailoring the grouping functionality to fit specific requirements and enhance data readability.
Here's a brief overview of the available options:
Option | Description | Effect on Group By Feature |
---|---|---|
Hide Undefined Label | Hides groups labeled as 'undefined'. | Keeps the table clean by removing undefined groups. |
Undefined Group Label | Sets a custom label for undefined groups. | Allows for custom naming of groups without defined categories. |
Non Collapsible | Makes grouped sections non-collapsible. | Ensures all groups are permanently expanded for visibility. |
Collapsed | Starts groups in a collapsed state. | Groups are initially collapsed, allowing users to expand as needed. |
Display Group Rows Count | Shows the count of rows in each group. | Provides a quick overview of the size of each group. |
Show Empty Groups | Displays groups even if they have no data. | Ensures visibility of all potential group categories. |
Direction | Specifies the direction of the order of the group by. |
Changing Group By Order Direction
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.
Video Tutorial
Other Settings
General Properties
Setting | Description |
---|---|
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. |
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. |
Header
Use the Header section to modify how your Data Table's top row looks and what users can do with it. Add clear column titles, enable sorting options, or include search and filter tools.
Title
Define a meaningful title for your Data Table. It introduces the timeline's content and is a key element of the visual hierarchy.
Caption
Use the caption field to add a brief description or supplementary information for your Data Table. This can be especially useful for providing context or additional details about the table data.
Icon
Add an icon to your header to enhance its visual appeal or to help convey the Data Table's purpose or content at a glance.
Is Joined
This property, when activated, gives the header a square, shadowless bottom border. This makes the header blend seamlessly with another component, making the Data Table appear as a continuous, unified element.
Action
Add interactive actions to your header to enable specific actions from the interaction pane. This provides additional functionality and enhances user engagement with the Data Table.
Visible Action
The "Visible Actions Buttons" allow you to configure and display action buttons readily visible for each row in the table. This contrasts with other hidden buttons that require user interaction to reveal.
Hide Action
The "Hide Actions" feature in the Header Actions allows you to control the visibility of the action menu.
Disable Action
The "Disable Actions" feature makes the action menu inactive while still visible.
Columns Widths
Columns' width can be customized if needed. Min and Max values can be set in pixel by default for all columns.
Setting | Description | Details & Options |
---|---|---|
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
"
Column Sorting
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.
Pagination
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
" toggleEnter your desired number of items per page
Adjust other settings like:
Pagination alignment
Buttons icon and label
Pill Container
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.
Setting | Description |
---|---|
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. |
This table outlines the key settings available for the Pill Container Display in the Avonni Data Table, detailing their functionalities and typical use cases to enhance user experience in Salesforce.
Filters
The Avonni Data Table offers three filtering options to streamline your data navigation experience. Each option is designed to accommodate different user preferences and screen sizes.
Name | Illustration | Description |
---|---|---|
Horizontal | These filters appear directly above the data table, laid out in a horizontal row. This layout is ideal for quickly accessing and applying filters without obstructing the view of the data table. | |
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. |
Accessing the Filtering Menu
Open the Component Builder
Scroll down to the Filter section
Select how you'd like to display filters
Side Panel Filter menu options
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.
Select the position that best suits your screen flow's layout and design.
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 want to emphasize the data table content initially.
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:
Dictates whether a toggle button is visible to users for 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.
Search
The Search Engine options let you configure your search box option. You can customize a placeholder text and set your search box position. The Search box will appear when at least one field is searchable.
How to make a field searchable
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.
Set fields as searchable without displaying them.
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.
Set a default search value
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.
Interactions
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.
Learn More
pageTips and TricksExploring Use Cases
Below are various examples highlighting how the Avonni Data Table can address your unique business needs.
Name | Description |
---|---|
Sales Pipeline Management | Sales reps can use Avonni Data Table to display a sorted list of potential deals in various sales pipeline stages. They can filter deals based on revenue, status, or owner and navigate the data easily with pagination. |
Contact lists for marketing campaign | Marketers can use the data table to display a list of contacts for an upcoming marketing campaign. Each contact can link to the full Salesforce record for easy access. Action buttons next to each contact can allow for quick updates or removal from the campaign. |
Inventory Management | A simplified table could display the status of various items in inventory. Hiding table headers and action columns can make the data more digestible at a glance for a warehouse manager. |
Project Task Tracking | Project managers can see tasks listed by priority and status. The pill container option can be used to show team assignments. Sorting can help quickly identify overdue tasks or those approaching their due dates. |
Customer Support Dashboard | Support agents can view a list of open customer tickets. The search engine options can be used to find tickets by customer name or issue type quickly. Selected tickets can be displayed in a pill container for easy reference during a shift. |
Employee Directory | HR can build an employee directory where employee photos are displayed alongside names and titles. Employees can be sorted and filtered by department, role, or location. |
Financial Directory | Finance teams can use the table to display complex financial data, such as quarterly earnings, budget allocations, or stock prices. Columns can be resized to accommodate lengthy financial terms or numbers. |
Event management | Event coordinators can track all aspects of an event, such as attendee lists, vendor contacts, and scheduled dates. Actions can include emailing attendees or vendors directly from the table. |
Training and Certification Tracking | HR can keep track of employee training and certification statuses. Progress bars can show how close an employee is to completing a training module, and dates can show when certifications expire. |
Last updated