Comment on page

Data Table

Meet the most complete and powerful Data Table for Salesforce.
The Data Table is also available as an Experience Cloud Component.

📘 Overview

The Avonni Data Table is the most complete and powerful data table available for Salesforce. It is adept at managing large datasets and handling tasks like scrolling, sorting, and searching. This high-performance component displays data efficiently and offers extensive customization options. With its robust capabilities, the Avonni Data Table is an essential asset for any Salesforce user seeking to streamline and optimize their data interaction experience

🎓 Tutorials

The Avonni Data Table stands out as one of the most comprehensive and robust data tables available for Salesforce, offering a wide array of functionalities to enhance your data handling capabilities. To help you fully harness its potential, we've compiled a series of detailed tutorials 👇.

🤜 Essential at a glance

This section highlights 3-4 of our most popular and informative articles, each delving into the data table's most utilized settings and options. Given the extensive range of customization possibilities the Avonni Data Table offers, these handpicked articles provide a concise yet comprehensive overview of the settings that users find most beneficial.

👍 Configuring the Data Table

Using the Data Source

The first key 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
Ideal for static or predefined data.
For tables without the need for updates or dynamic changes, like fixed lists.
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.

Using the 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 'Get Records' or 'Query' mode from Salesforce. 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: Select the corresponding Salesforce object using the Query mode. Upon selection, 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.

Configuring columns

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:
  1. 1.
    Access Column Settings:
    • Each column associated with your Salesforce data appears listed in the Data Mappings section.
    • By clicking on a specific column in this section, the property panel for that particular column will open.
  2. 2.
    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.
  3. 3.
    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.
  4. 4.
    Enhanced Data Representation:
    • By taking advantage of these customization options, you can enhance the overall effectiveness of your data table.
    • This approach ensures that your table displays the correct data and presents it in the most user-friendly and context-appropriate manner.
List of available Data Type
  • Action: Dropdown menu with various actions.
  • Avatar: Shows a user or profile picture.
  • Badge: Shows a badge icon or label.
  • Boolean: Shows a checkmark icon for 'true' values; empty for 'false' values.
  • Button: A clickable button.
  • Button Icon: Button with an icon.
  • Color Picker: Tool to choose colors.
  • Counter: Shows a numerical count.
  • Currency: Shows money values.
  • Date: Shows date and time, formatted for the region.
  • Date Local: Shows a locally formatted date.
  • Email: Displays email addresses as clickable links.
  • Location: Shows coordinates (latitude and longitude).
  • Number: Displays numerical values.
  • Percent: Shows values as percentages.
  • Phone: Clickable phone number.
  • Progress Bar: Horizontal bar showing progress.
  • Progress Circle: Circular graphic showing progress.
  • Progress Ring: Another style of a circular progress display.
  • QR Code: Scannable QR code.
  • Rating: Star or point-based rating system.
  • Rich Text: Displays formatted text with styles.
  • Slider: Adjustable slider bar.
  • Text: Plain text display.
  • Toggle: Switch-style button for on/off settings.
  • URL: Clickable web link.

Explore More: Further Reading and Resources

In 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, making your data table a powerful and adaptable tool in your Salesforce environment.

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

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

🎚️ Other Settings

General Properties

Use Case in Salesforce
Hide Table Header
Hides the table header when enabled.
Useful for minimalistic designs where header information is not needed.
Hide Checkbox Column
Removes the checkbox column used for row selection.
Ideal when row selection is not required, simplifying the table view.
Show Row Number Column
Displays row numbers in the first column if enabled.
Helps in easily referencing or organizing rows, especially in large datasets.
Makes row selection mandatory for users.
Ensures essential data is selected, especially in decision-making processes.
Max Row Selection
Sets the maximum number of rows that can be selected.
Limits selection for actions needing restricted inputs, like batch processing.
Suppress Bottom Bar
Hides the footer with Save and Cancel buttons during inline editing.
Streamlines the interface during editing, reducing visual clutter.
Show Number of Items Selected
Displays the count of selected items if enabled.
Useful in tracking the number of entries being worked on, enhancing user awareness.
Read Only
Prevents editing of records, making the table read-only.
Essential for viewing data without the risk of unintended modifications.

Customizing the Header Appearance

The Header section gives you control over the appearance and functionality of your Data Table header.
Define a meaningful title for your Data Table. It introduces the timeline's content and is a key element of the visual hierarchy.
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.
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.
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 Actions Buttons
The "Visible Actions Buttons" allows you to configure and display action buttons readily visible for each row in the table. This is in contrast to other hidden buttons that require user interaction to reveal.
Hide Actions
The "Hide Actions" feature in the Header Actions allows you to control the visibility of the action menu.
Disable Actions
The "Disable Actions" feature makes the action menu inactive while still visible.

Customizing Columns Widths

Columns' width can be customized if needed. Min and Max values can be set in pixel by default for all columns.
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.
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"
  • Set a specific fixed width for this column.

Configuring Column Sorting Options

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.

Setting Up Pagination

The Pagination Options 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

Implementing Pill Container Display

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.
Final result
Use Case
Label Field
Determines the field name used for the pill label.
Useful for displaying specific data as pill labels, enhancing clarity.
Enables sorting within the pill container.
Allows users to rearrange pills, facilitating better organization.
Single Line
Restricts the pill container to a single line.
Keeps the display compact and streamlined, ideal for limited spaces.
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

Making a field filterable

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.
How to Apply Field Filters in the Data Table Without Displaying the Fields

Configuring the Popover Filter Menu

The Display as Popover option, when enabled, displays the filter menu as a popover instead of its default appearance. This provides a compact and discreet user interface, allowing users to access and apply filters without disrupting the overall layout.
Filtering option in action

Accessing the filtering option

  • Open the Component Builder
  • Scroll down to the Filtering Option section
  • Toggle the "Display as Popover" to activate the filtering option

Configuring Search Options

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

From the interactions pane, you can define interactions when users interact with the Data Table. Interactions can be added: select an option or multiple ones (when multi-select is enabled).
  • Header Action: when pressing buttons actions.
  • Row Action: when selecting one of the row actions created on the Data Table.
  • Save: when pressing the Save button when the end-user is editing a field.
  • Cancel: when pressing the Cancel button.
You can add a complete list of actions to the Data Table.

🚀 Learning more

Unique Features of the Avonni Data Table Component.
🔹 Inline Editing: Modify data directly within the table without navigating away.
🔹 Display Lookup Fields: These are rendered as clickable links directing to the corresponding records.
🔹 Advanced Data Formatting: Customize data presentation with formats like QR Code, Progress Bar, and Badge.
🔹 Sortable Data: Organize your data effortlessly with a simple click on column headers.
🔹 Custom Column Width: Adjust the width of your columns to fit your content better.
🔹 Row Actions: Execute predefined functions directly from each data row.
🔹 Pagination: Navigate through data pages for enhanced viewing.
🔹 Infinite Scrolling: Scroll endlessly and watch more data load dynamically.
🔹 Data Filtering: Search and view only what you need by applying data filters.
🔹 Update Records Interaction: Engage with and modify records seamlessly.
🔹 Copy Records Interaction: Duplicate records effortlessly, straight from the table.
🔹 Integrated Header: A unified header that makes your table look polished.
🔹 Selective Searchability: Set specific fields as searchable, even if they're not displayed.
🔹 Query Data Source: Visually create dynamic, real-time, detailed queries with no-code.
Data Table Component Builder
The Component Builder lets you easily adjust the Data Table, such as properties, interactions, and styling settings. This customization means you can modify your Data Table look and its operation, creating a practical and visually clear way to manage data.
  1. 1.
    Template Gallery: Access a variety of preconfigured data table templates, designed for easy deployment and optimized user experience.
  2. 2.
    Undo/Redo: Effortlessly correct mistakes or revisit changes
  3. 3.
    Full Height: Optimize visibility with 'Full Height' setting, ensuring Data Table utilizes entire screen height and activates infinite scrolling.
  4. 4.
    Pull to Boundary: Optimize space with 'Pull to Boundary'; extends Data Table to every edge, reducing unwanted white space.
  5. 5.
    All Columns Settings: Activate 'All Column Settings' for universal configuration, superseding individual column preferences.
  6. 6.
    Copy/Paste: Duplicate and transfer settings within the Data Table component to another Data Table on your screen flow.
  7. 7.
    Properties Tab: Comprehensive customization of all Data Table component settings and properties.
  8. 8.
    Interactions Tab: Configure and manage actionable interactions.
  9. 9.
    Style Tab: Customize the appearance and aesthetics of your Data Table, enhancing visual appeal and usability.
  10. 10.
    Fields selection: Choose and drag fields onto the canvas, optimizing use with Variable or Query Data Source settings.
  11. 11.
    Data Table Preview: Quickly visualize and modify with 'Data Table Preview': drag fields and fine-tune key settings effortlessly.

🎛️ Specifications

Styling Hooks
Array of the columns object that's used to define the data types
Specifies how column widths are calculated. Set to 'fixed' for columns with equal widths
Specifies the default sorting direction on an unsorted columnSpecifies the default sorting direction on an unsorted column
To display the Record Name as a link with an automatic redirection.
Specifies whether a column supports inline editing.
Make the row editable.
Specifies whether a column supports filtering.
Specifies the width of a column in pixels and makes the column non-resizable.
If present, the checkbox column for row selection is hidden
If present, the column header default action is hidden
If present, the table header is hidden
The SLDS name of the icon.
The width of the column when it's initialized
Required for better performance.
Associates each row with a unique ID
The Text label displayed in the column header.
Displays text using lightning:formattedText. This is the default data type.
The name that binds the columns attributes to the associated data.
The maximum width for all columns
The maximum number of rows that can be selected
The minimum width for all columns
Placeholder text in search field indicates expected input and guides user.
The position of the Search bar.
The array of data to be displayed. The objects keys depend on the columns fieldNames
Require a user to make at least one row selection before moving to the next step.
If present, column resizing is disabled
The width to resize the column when a user presses left or right arrow
Determines where to start counting the row number
Specifies whether the column records can be searched.
Enables programmatic row selection with a list of key-field values
If present, the pagination is shown at the bottom of the table.
If present, the selected item is shown in a pill container.
If present, the row numbers are shown in the first column
Specifies whether the column can be sorted.
The column key or fieldName that controls the sorting order
Specifies the sorting direction. Sort the data using the onsort event handler. Valid options include 'asc' and 'desc'
The name that binds the columns attributes to the associated data.
If present, the footer that displays the Save and Cancel buttons is hidden during inline editing
The data type to be used for data formatting.
This value specifies the number of lines after which the content will be cut off and hidden. It must be at least 1 or more
Specifies whether text in a column is wrapped when the table renders.
The event fired when the Cancel button is pressed
The event fired when the Save button is pressed
The event fired when the dropdown menu option is selected

🌟 Possible Use Cases

Below are various examples highlighting how the Avonni Data Table can address your unique business needs.
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 modified 2d ago