Overview

The Avonni Data Table component is a versatile and feature-rich tool for displaying tabular data on Salesforce Experience Cloud Sites. It offers extensive customization options for various data presentation needs, from primary data listing to more complex, interactive tables.

🎥 Tutorials

Connect Your Data Table to Salesforce Data

Data Source

The Data Source section is where you connect the Avonni Data Table with your Salesforce data. You have two options.

Data Mappings Configuration

You bring your data table to life in the Data Mappings section by defining and customizing its columns.

Adding Columns

• Click on the 'Add Columns' button to select fields from your data source to display as columns in the data table.

• This section determines what data is visible and how it is organized in your table.

• Click on a column to access all the properties for that specific column.

Configuring Column Properties

• Data Type: Adjust the field's display type (e.g., text, number, date) to ensure correct data representation.

• Linkify: Enable linking of cell data to other records or URLs for quick navigation.

• Cell Attributes: Customize cell alignment and icons for a more intuitive and visually appealing table.

• Editable: Decide if a column should be editable directly within the table.

• Filterable and Searchable: Enable filtering and searching capabilities on a per-column basis for efficient data management.

• Hidden: Choose to hide certain columns, useful for sensitive or less relevant data.

• Sortable: Allow users to sort data by the specified column.

• Hide Default Actions: Opt to hide pre-set actions for a cleaner look.

• Wrap Text: Enable text wrapping for better readability in narrow columns.

• Set Column Width: Specify the width of each column for a balanced and organized layout.

Adding Row Actions

Here's a guided interactive tutorial on adding row actions to the Data Table.

Other Configuration Settings

Basic Settings

Hide Table Header

• This option lets you remove the table header for a cleaner, more minimalistic look.

Hide Checkbox Columns

• Enable this setting to hide the checkbox columns, typically used for row selection in multi-action scenarios.

Show Row Number Column

• Activate this to display a column that enumerates each row, which is useful for easy data referencing.

Header Configuration

Title and Caption

• Customize the header with a title and a caption to provide context or summary information about the table data.

Icon Name and Size

• Enhance the header with an icon, selecting its type and size for visual emphasis.

Is Joined

• This setting determines whether the header visually connects with the body of the table, affecting the overall design.

Header Actions

• Configure actions (add, delete, or custom functions) directly accessible from the table header.

Action Buttons on the Header

• Implement action buttons in the table header for adding new records, exporting data, or other custom actions, enhancing user interaction and efficiency.

Configure the interaction on the button

Configure the interaction for when users press the header action button in the 'On Click' section. To understand how the 'Navigate' interaction operates, click here for more information.

Pagination Attributes

• Configure pagination settings, such as the number of items per page and pagination style, to manage how data is displayed and navigated in larger tables.

Search Engine Configuration

• Placeholder: Set a text placeholder for the search box, guiding users on what they can search for.

• Position: Choose the position of the search box within the table layout for optimal accessibility.

• Default Search Value: Predefine a search value to filter the table data when it loads.

Settings