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:

Tutorials

Learn how to fully utilize the power of the Avonni Data Table, a great component for managing and displaying data within Salesforce.

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

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:

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. 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. 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. 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

In summary, the Data Mappings feature in the Avonni Data Table doesn't just link your Salesforce data to the table columns; it also allows you to customize how each column functions and appears.

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.

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.

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.

Learn more about making a field editable

Read the tutorial below 👇

Row 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.

Learn more about creating row actions.

Read the tutorial below 👇

Group 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:

1. Choose Your Grouping Column: Select the column that contains the values you want to group your data by (e.g., "Region," "Product Type," etc.).

2. 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.

How to enable it?

To activate the Group By feature in your Avonni Data Table, follow these straightforward steps:

1. Open Component Builder: Launch the Avonni Data Table component builder in your Salesforce environment.

2. Scroll to Group By Setting: Navigate to the bottom of the settings panel within the component builder.

3. 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:

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.

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.

Video Tutorial

Other Settings

General Properties

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 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.

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

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.

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.

Column Sorting

You can set the sorting options for columns. The default sorting direction is applied to sorted columns.

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" toggle

• Enter 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.

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.

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.

Enable Filtering on All Columns

Want to make all columns filterable by default? The Avonni Data Table makes it easy:

1. Click the "All columns settings" button.

2. CLick on the filterable option.

With just two clicks, you'll activate default filtering capabilities for every column in your Data Table

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.

Filters Options

The Avonni Data Table offers three filtering options typ, each designed to accommodate different user preferences and screen sizes.

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

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.

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.

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.

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