Data Table
The Avonni Data Table component allows you to display collections of data in a structured and organized table format.
Last updated
Was this helpful?
The Avonni Data Table component allows you to display collections of data in a structured and organized table format.
Last updated
Was this helpful?
The first step is to tell the Data Table where to pull its data.
Here are your options:
Once your data source is connected, you must define which fields will be displayed as columns and how they are configured.
Add Column: Click the "Add Column" button to create a new column. Repeat for each field you want to display.
Map Data Fields:
Source Field: Select the field from your chosen data source (Manual, Variable, or Query) that will populate this column.
Column Label (Optional): Provide a user-friendly name for the column header. If left blank, the system may use the field name or label.
Data Type: The Data Table will usually auto-detect the data type (Text, Number, Date, etc.). You can often override this if needed (e.g., to display a number as currency).
Customize Column Settings: Adjust these settings as needed:
Filterable: Allow users to filter the table based on this column.
Editable: Allow users to modify data directly in this column's cells. Important: See the "Enable Inline Editing" section below for details on saving edits.
Searchable: Include this column in table-wide searches.
Sortable: Allow users to sort the table by this column.
Width: Specify a fixed or percentage-based width for the column.
Alignment: Control text alignment (left, center, right).
Other Options: Explore additional column settings in the Data Table documentation for advanced customization.
Reorder Columns (Optional): Drag and drop columns within the configuration area to change display order.
Allow users to edit data directly within the table cells.
Pencil Icon: Enabling the "Editable" setting on a column will display a pencil icon. Users click this to edit the cell's value.
Direct Cell Editing ("Display as Input"): For a more streamlined experience, choose the "Display as Input" option. This makes cells editable without requiring an extra click.
Enabling inline editing does not automatically save changes. You must configure an "On Save" interaction:
Add Interaction: In the Interaction tab, add an "On Save" interaction.
Action Type: Choose "Update Records" to save the underlying Salesforce data changes.
Tutorial 👇
Provide quick access to actions related to individual records in the table.
Create an Action Column: Add a new column to your table, and set its Type to "action". This is essential for creating row actions.
Define Action Labels: Within the action column's settings, add your desired actions (e.g., "Edit," "Delete," "View Details"). These labels will appear in a dropdown menu on each row.
Organize data into categories for more straightforward analysis and understanding.
Grouping Column: Choose a column to group by in the Data Mappings section (e.g., "Status," "Region," "Owner").
Display Options:
Hide Undefined Labels: Control the display of empty grouping values.
Collapse Groups: Initially collapse groups to save space.
Show Row Counts: Display the number of records within each group.
Group Order: Set the sorting order for groups (default, ascending, descending, or custom).
Linkify Values: (For lookup fields) Make group header values clickable, navigating the user to the related record
Long column headers automatically wrap up to 3 lines, preventing clipped text and improving readability
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.
The Avonni Data Table, like Salesforce's lightning-datatable, does not directly support pre-selecting rows using record IDs. Row selection is managed through:
Data: The data provided to the table.
User Interaction: Clicks within the table.
You cannot programmatically select rows by ID via a built-in property. Instead, row selection is a consequence of the data displayed and direct user actions.
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.
The header is the top row of your Data Table. Use the Header section to customize its appearance and add functionality.
displayedTitle: 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 everyday 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 displayed 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.
Specifies how column widths are calculated.
- Fixed: Equal widths for all columns. - Auto: Widths based on content and table width. Default is 'fixed'.
Establishes the minimum width for all columns.
Ensures columns don’t become too narrow, affecting readability.
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.
Disables manual column resizing.
Helpful in maintaining consistent column widths.
Column width can be set individually for each column as follows:
Go to the Data Mappings section
Click on a column
Scroll down entirely and click on "Advanced Option"
Set a specific fixed width for this column.
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.
Final result
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:
In Component Settings (Properties Panel): Customize filter settings within the component's properties.
Filtering on Non-Visible Data: 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.
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.
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.
How to Apply Field Filters in the Data Table Without Displaying the Fields
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
Select the Data Table
From the Properties panel, 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's picklist filters automatically adapt to your data. When filtering a picklist column, the filter menu only displays picklist values present in at least one row of the current table data. This avoids showing unused options and simplifies the filtering process.
Enable this by setting "Hide Picklist Empty Values" to "On" in the Data Table properties.
The Search 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.
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 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.
Select the Data Table
Open the Data Mappings section
In the Search Fields attribute, select the fields that must be searchable without displaying them in the Data Table.
In the Search options, 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.
You can configure various interactive elements within the Avonni Data Table to provide users with ways to interact with data:
Purpose: Provide actions that operate on the entire data table or trigger general tasks.
Implementation: Add buttons or other interactive components to the data table's header area.
Examples: "Create New Record," "Export to CSV," "Bulk Update," "Apply Filter Preset."
Purpose: Allow users to perform actions related to a specific record in the table.
Implementation: Add buttons or other interactive components to each data table row.
Examples: "Edit Record," "Delete Record," "View Record Details," "Approve/Reject," "Start Workflow."
Purpose: To persist any edits made within the editable cells of the Data Table.
Purpose: Allow users to revert any unsaved edits and restore the table to its previous state.
Implementation: Configure a designated button or action to cancel pending changes
Interactions: You must define for each row action. For instance, clicking "Delete" should trigger an interaction that opens a confirmation flow.
Use the component: For a more responsive solution, consider using the Avonni List component. This component that adjust the display based on screen size. Combine this with Salesforce's component visibility settings to show the List only on mobile devices.
Tutorial:
Implementation: Configure a designated interaction to trigger the "," which commits the changes to the underlying data source.
Manual
Enter data directly into the component configuration. This is suitable for small, static datasetsta.
Variable
Use a variable as your data source. This is useful for data that changes based on user interactions or other component logic.
Query
Fetch data directly from Salesforce using a query. This is the most common option for displaying Salesforce records.