Data Table
The Data Table is also available as an Experience Cloud Component.
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:
Tutorials
Learn how to fully utilize the power of the Avonni Data Table, a great component for managing and displaying data within Salesforce.
Data TableKey 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.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FSAShm9rmVm9TaiQIxRWk%252F2023-12-01_15-10-23.png%3Falt%3Dmedia%26token%3D149f10ea-b946-4f2d-9ecb-321d6ff66ca9&width=768&dpr=4&quality=100&sign=fc2f164a&sv=1)
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.
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.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FTCNz0L55Gm6FqRZxYkHr%252F2023-12-01_15-10-23-2.png%3Falt%3Dmedia%26token%3D52e40046-20e5-4e8c-9d99-60b4f49c2738&width=768&dpr=4&quality=100&sign=da0be6ca&sv=1)
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.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FxF3QB3b7czr5AyJRETZS%252FDragNDropQuery.gif%3Falt%3Dmedia%26token%3D36ecd633-c232-4b4d-8ab2-fb4986e81b19&width=768&dpr=4&quality=100&sign=fd5f957d&sv=1)
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.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252F5H6ngeGea1jeY0mUkkzD%252FAddColumnDataTable.gif%3Falt%3Dmedia%26token%3Db0bf743e-d36f-4ad8-9a41-0ab3b368fef0&width=768&dpr=4&quality=100&sign=1e22bf05&sv=1)
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.
By clicking on a specific column in this section, the property panel for that particular column will open.
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:
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FXLyqUYmdgVmmG8CyPcqV%252F2023-12-02_12-02-55.png%3Falt%3Dmedia%26token%3De25619b4-3891-452f-88fd-ba544a591d74&width=768&dpr=4&quality=100&sign=cedbd424&sv=1)
Explore More: Further Reading and Resources
How to add Images onthe Data TableDisplaying Record Name field as a linkDisplaying 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 allows you to customize how each column functions and appears.
How to make a field editable
Enable inline editing in the Avonni Data Table to streamline updates and create a more intuitive user experience.
Two Editing Modes Available
Inline Editing (Pencil Icon)
When you activate inline editing for a field, a pencil icon appears next to the data. Users click the icon to edit.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252Fa6FZP6hHUxcRTmvgm5mK%252F2024-05-18_06-32-09.png%3Falt%3Dmedia%26token%3Df415eb81-79c4-409a-8153-ac8c3636bf8a&width=768&dpr=4&quality=100&sign=aa2a98e4&sv=1)
Direct Cell Editing
For even faster edits, choose "Display as Input." This transforms the field into an editable input box, eliminating the need for extra clicks.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252F8TRtqhZxRbNOjkeqMZaU%252F2024-05-18_06-29-48.png%3Falt%3Dmedia%26token%3D2068b156-517f-4325-ad77-7d0e25024732&width=768&dpr=4&quality=100&sign=77b7e331&sv=1)
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FjAnjHAPsNyz3aUIqet0R%252F2024-05-20_14-54-55.png%3Falt%3Dmedia%26token%3D9fc2af49-6900-47ee-8c4c-81867eeb3b74&width=768&dpr=4&quality=100&sign=897397b0&sv=1)
How to Choose:
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
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 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. 👇
Learn more about making a field editable
Due to Salesforce API restrictions, fields within the Event and Task objects are not editable.
Here's the list of all the supported objects for the inline editing.
Read the tutorial below 👇
Making a field editableRow Actions
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.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FTLu2jJlp9KmzuIpx3mae%252F2022-11-23_09-36-56.png%3Falt%3Dmedia%26token%3D973d6d4b-1330-46ef-a618-938834203269&width=768&dpr=4&quality=100&sign=62a4db13&sv=1)
Learn more about creating row actions.
Read the tutorial below 👇
Adding Row ActionsHow to create an interaction to open another flowEnabling auto-refresh for queries after the Flow Dialog endsGroup By
The "Group By" feature effortlessly categorizes your data within the table. This makes it easier to analyze and understand, especially when working with large datasets.
How It Works:
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.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FAUb7SjD2qxmeJDCqmFJk%252F2023-12-07_21-15-42.png%3Falt%3Dmedia%26token%3D003a3df8-1bbe-4d6f-b0da-d08e20e9dbfb&width=768&dpr=4&quality=100&sign=a6156ad7&sv=1)
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
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252Fwb2yDK24MepWXZqWy1mp%252F2023-12-07_21-19-25.png%3Falt%3Dmedia%26token%3D35801fd6-b134-4f42-babd-14c90cf4362b&width=768&dpr=4&quality=100&sign=714918c6&sv=1)
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.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FbjmHSXQvt11eVg7s4STJ%252F2023-12-07_21-26-35.png%3Falt%3Dmedia%26token%3Dfd43fe58-3973-4d1a-9a99-cf1d9c432011&width=768&dpr=4&quality=100&sign=e800a753&sv=1)
Here's a brief overview of the available options:
Option | Description |
---|---|
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 |
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.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FBaKPPDtv5umeQF4m3xTz%252FAvonni%2520Components%25205.0%2520%282%29.gif%3Falt%3Dmedia%26token%3D4aa44ca4-aa44-4fcb-b5fb-250938cea3ad&width=768&dpr=4&quality=100&sign=1b1f61f4&sv=1)
Linkify group by values
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.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252F2jmiodlymM91YeYSoBBV%252F2024-05-17_15-32-39%2520%281%29.gif%3Falt%3Dmedia%26token%3D85e5e1d7-5ef5-470d-aa20-1326f3406170&width=768&dpr=4&quality=100&sign=9e5832d7&sv=1)
Video Tutorial
Other Settings
General Properties
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FOUeC0Ty75j5Sjtj7U3OI%252F2023-12-02_12-36-23.png%3Falt%3Dmedia%26token%3D32f5f551-0e37-4637-962c-1391203b1fdd&width=768&dpr=4&quality=100&sign=adc9081c&sv=1)
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. NOTE: The Avonni Data Table is based on Salesforce's standard Data Table. Due to this, enabling inline editing will automatically display row numbers. This is a standard Salesforce behavior that we can't directly control. |
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.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FH9m8yubuRLJeDeX2NSxB%252F2024-02-18_14-34-23.png%3Falt%3Dmedia%26token%3De840df8d-fdec-43a7-83e5-3c0eb1049cd4&width=768&dpr=4&quality=100&sign=260372e&sv=1)
Title
Define a meaningful title for your Data Table. It introduces the timeline's content and is a key element of the visual hierarchy.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FchUKe4D78rcIsnAmvgPI%252F2024-02-18_14-34-23-2.png%3Falt%3Dmedia%26token%3Ddc84b733-a576-4c5c-a1e8-4573ca04cf52&width=768&dpr=4&quality=100&sign=36919a0c&sv=1)
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.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FjFeId0yBzUuimwGCcGvf%252F2024-02-18_14-34-23-3.png%3Falt%3Dmedia%26token%3Ddacda9c2-e141-4b65-9b1e-31d85d2a8ebf&width=768&dpr=4&quality=100&sign=ab6b64c&sv=1)
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.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252F64fk7wxEU6EfGdKp2F8H%252F2024-02-18_14-34-23-4.png%3Falt%3Dmedia%26token%3D83879b19-88ff-4f29-9a1d-5ad773067914&width=768&dpr=4&quality=100&sign=1498ac75&sv=1)
Is Joined
This property gives the header a square, shadowless bottom border when activated. This makes the header blend seamlessly with another component, making the Data Table appear as a continuous, unified element.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FGnpwOHqHRk3sIbiH1rtF%252F2024-02-18_14-34-23-5.png%3Falt%3Dmedia%26token%3D6bdcf9d0-5136-4e32-a5ae-0a357a2614c1&width=768&dpr=4&quality=100&sign=fee8be46&sv=1)
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.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FPlYqI3m7XIUK95fdWmW7%252F2024-02-18_14-34-23-6.png%3Falt%3Dmedia%26token%3De93fe13b-0c54-4f22-a1a6-c15f3a05e4d2&width=768&dpr=4&quality=100&sign=74ea5751&sv=1)
Visible Action
This setting controls how many action buttons are directly visible within the table's header. This enhances user experience by providing quick access to common actions.
To configure: Set the "Visible Actions Buttons" value to the desired number of immediately displayed buttons.
Example: If you have 4 actions defined for the header and set "Visible Actions Buttons" to 2, only the first 2 buttons will display directly. The remaining 2 actions will be accessible within a dropdown menu.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FucOs8QrxIWbaEuwp6f7r%252F2024-05-08_11-53-26.png%3Falt%3Dmedia%26token%3Db7883b64-01f3-4359-8964-0ad73e6ad297&width=768&dpr=4&quality=100&sign=35fa1b05&sv=1)
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
Column widths can be customized if needed. By default, all columns have min and Max values set in pixels.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FD3X4rNZPvG8Ld87sECy0%252F2023-12-01_21-59-34.png%3Falt%3Dmedia%26token%3Db0922db7-f5b2-4936-8cd5-8015b4f42fac&width=768&dpr=4&quality=100&sign=da4e94e8&sv=1)
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
"Set a specific fixed width for this column.
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.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FrF2S2c2D1QRXUjQz6ulx%252F2023-01-11_20-45-13%2520%281%29.gif%3Falt%3Dmedia%26token%3D1c21a39f-eaae-4d30-aafe-f869000dc774&width=768&dpr=4&quality=100&sign=d3885b11&sv=1)
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FB5frDxGs9KTbZGqYvVQp%252F2023-12-02_12-21-18.png%3Falt%3Dmedia%26token%3Dc311870f-0034-4f03-9661-87cc6da77945&width=768&dpr=4&quality=100&sign=3e622e14&sv=1)
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 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 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.
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.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FCtjmdn4V2oCEQunF0kmV%252FImage%2520from%2520Avonni%2520Components%2520%281%29.webp%3Falt%3Dmedia%26token%3D49102fe6-7cc4-435f-8d26-e8d95c334896&width=768&dpr=4&quality=100&sign=3d8c6001&sv=1)
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.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FwU0DfAmZ0YTr5iOotPBJ%252FImage%2520from%2520Avonni%2520Components.webp%3Falt%3Dmedia%26token%3D1dcfd66e-adbd-4420-a192-bd0263e140cd&width=768&dpr=4&quality=100&sign=cea0952&sv=1)
Enable Filtering on All Columns
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
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FPACRJIHh8xQkaMv6ExyK%252F2024-06-19_09-50-36.png%3Falt%3Dmedia%26token%3Dfb5bdaf6-1221-41ca-a98f-a9988c89b58f&width=768&dpr=4&quality=100&sign=4ca100b1&sv=1)
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.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FSPwQm0MKJNmtNN8gDB6S%252FImage%2520from%2520Avonni%2520Components%2520%282%29.webp%3Falt%3Dmedia%26token%3Dd38906c4-f06b-4604-80d0-5edea1e59570&width=768&dpr=4&quality=100&sign=8d2611a&sv=1)
Filters Options
The Avonni Data Table offers three filtering options typ, each designed to accommodate different user preferences and screen sizes.
Filter Type | 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 to choose your filter type
Open the Component Builder
Scroll down to the Filter section.
Select how you'd like to display filters
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252Fc5myJVZtCyjilZaUfSs4%252F2024-02-13_20-50-08.png%3Falt%3Dmedia%26token%3D8fd64399-4ee3-4e8f-a497-e77d9d7390e3&width=768&dpr=4&quality=100&sign=cb60a2c&sv=1)
Dynamic Picklist Filters
To enhance your filtering experience, the Avonni Data Table offers dynamic picklist filters. 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.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FXPPcWd2hchWVqdWgNsxt%252F2024-06-28_11-09-27.png%3Falt%3Dmedia%26token%3Dab31844c-eb40-41b1-8a10-b94c481d83d7&width=768&dpr=4&quality=100&sign=69254e51&sv=1)
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.
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:
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.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FfzkEi7RNIGDKKJQH6zQF%252F2024-02-14_20-26-53.png%3Falt%3Dmedia%26token%3D165e1b31-0069-4852-929a-80dddeaa3268&width=768&dpr=4&quality=100&sign=5e8611a1&sv=1)
Search
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.
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.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FzBtKdONJ9RIhHM6idyiS%252F2023-01-11_20-55-50.png%3Falt%3Dmedia%26token%3D1151c93b-4606-40f3-aa54-db31a25097e4&width=768&dpr=4&quality=100&sign=5706f3c7&sv=1)
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.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FoeJoKfSaRXkhWLEZjmR1%252F2023-01-11_20-57-05qwe.png%3Falt%3Dmedia%26token%3D9b603212-f42e-46ee-9597-4f8f93c3cccf&width=768&dpr=4&quality=100&sign=7382beeb&sv=1)
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.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FlIHLAUzrwi1EAY0D1rvG%252F2024-02-14_20-25-22.png%3Falt%3Dmedia%26token%3Dceb9517c-de94-4106-a24d-c5f1cb4aa535&width=768&dpr=4&quality=100&sign=19bd42c2&sv=1)
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.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FJ8JR6fuQcVvgu9hRLa12%252F2023-08-16_21-01-36.png%3Falt%3Dmedia%26token%3Dd3b6bf66-fae8-4380-8d4c-0dfa63313dd2&width=768&dpr=4&quality=100&sign=8a8559a0&sv=1)
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:
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FjCocifMLJScMha1HsYmU%252F2024-02-18_21-12-51.png%3Falt%3Dmedia%26token%3D85177b1f-e72a-4068-8c28-2630ab59636e&width=768&dpr=4&quality=100&sign=a1052b5d&sv=1)
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
Last updated