Data Table

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.

The Avonni Data Table is a Reactive Data Component

Tutorials

Create an Export To button on the Data Table

Configuring the Data Table

Displaying Salesforce CMS Files in a Data Table

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 Source Type	Description	Use Case
Manual Data Source	Manually input data into the data table.	Ideal for non-dynamic data, testing, and demos.
Query	Create a query to auto-populate the table with Salesforce data.	Suited for dynamic, real-time, and large datasets.
CMS Collection	Seamlessly display your CMS Collections within Data Tables for dynamic content updates.	Create automatically updating resource lists or news feeds.

In Query mode, data is shown in batches of 25 records to maintain optimal site performance.

Data Mappings Configuration

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

Data Model Sharing with Avonni Data Table

Adherence to Salesforce Data Sharing Rules:

• Respecting Org Settings: Avonni Components fully comply with the existing data-sharing configurations and access settings of your Salesforce organization.

• No Interference Policy: These components do not alter or affect your pre-established data-sharing rules in any way.

• Controlled Visibility and Access: The ability to view and interact with records through Avonni Components is governed by your organization's defined sharing settings and user permissions

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) that are 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.

Tutorial

Create an Export To button on the Data Table

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.

In Query mode, data is displayed in sets of 25 records to keep site performance optimal. Therefore, setting up pagination can be beneficial.

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.

To display the search box, at least one column must be marked as 'Searchable'.

At least one column must be set on "Searchable" to display the search box.

Settings

🎛️ General

Name	Description
Hide Table Header	Toggle to hide the table's header
Hide Checkbox Column	Remove the column used for row selection checkboxes
Show Row Number Column	Display a column showing the row number
Row Number Offset	Set the starting number for the row numbering
Max Row Selection	Limit the maximum number of rows that can be selected
Suppress Bottom Bar	Hide the bottom bar typically used for actions and information display
Show Number of Items Selected	Display the count of currently selected items
Read Only	Make the table non-interactive, disallowing any edits or selections
Allow Edit on All Columns	Enable editing for all columns
Allow Filter on All Columns	Enable filtering options for all columns
Allow Wrap on All Columns	Allow text wrapping in all columns
Hide Default Actions	Hide pre-defined actions like edit or delete
Columns Widths Mode	Choose between 'fixed' or 'auto' for column width setting
Max/Min Column Width	Set maximum and minimum limits for column widths
Wrap Text Max Lines	Define the maximum number of lines for text wrapping in cells
Resize Column Disabled	Disable the ability to resize columns
Resize Step	Set the increment step for column resizing
Sorted/Default Sort Direction	Choose 'asc' or 'desc' for initial sorting direction
Show Sorted by Value	Display which column is currently being used for sorting
Header Title/Caption	Set a title and caption for the table header
Header Icon Name/Size	Add an icon to the header with customizable size
Header is Joined	Opt to visually connect the header with the table body
Hide/Disable Header Actions	Control visibility and interactivity of header actions
Visible Header Actions Buttons	Specify which action buttons are visible in the header
Header Actions	Add custom actions to the table header

⏩️ Pagination and Search

Pagination Attributes

Name	Description
Show Pagination	Toggle the display of pagination controls
Number of Items per Page	Set how many items to display per page

Pill Container Options

• Show a container for selected items, often used with row selection.

Search Engine Options

Name	Description
Placeholder	Set placeholder text for the search input
Position	Define the position of the search bar
Default Search Value	Pre-populate the search bar with a default value

🗄️ Filtering and Data Source

Name	Description
Filtering Options	Configure filtering to display as a popover for each column.
Data Source	Select between 'manual' and 'query' for populating table data.
Columns	Define and add columns to the data table, customizing each column's properties and behavior.

🎨 Styling

Header

Name	Description
Background Color	Sets the color for the header's background.
Border Color	Defines the color of the header's border.
Border Size	Adjusts the thickness of the border.
Border Style	Selects the style (solid, dotted, dashed, etc.) of the border.
Border Radius	Rounds the corners of the header.
Bottom Border Color (Is Joined)	Specifies the color of the bottom border when the header is visually joined with the table body.
Bottom Border Size (Is Joined)	Determines the thickness of the joined bottom border.
Bottom Border Style (Is Joined)	Sets the style for the joined bottom border.
Padding and Margin	Controls the spacing inside (padding) and outside (margin) of the header.

Header Title

Name	Description
Color	Sets the color of the title text.
Font Size	Adjusts the size of the title text.
Font Weight	Alters the boldness of the title text.
Font Style	Applies a specific style (italic, normal) to the title text.

Header Caption

Name	Description
Color	Defines the color of the caption text.
Font Size	Adjusts the size of the caption text.
Font Weight	Controls the thickness of the caption text.
Font Style	Sets the style of the caption text.

Header Icon

Name	Description
Background Color	Sets the background color of the icon.
Foreground Color	Changes the color of the icon itself.
Foreground Color Utility	Adjusts the utility color for contrast or emphasis.
Border Radius	Rounds the corners of the icon for a softer look.

Pill Container

Name	Description
Pill Background Color/Hover	Sets the background color of the pill elements, with a different color on hover.
Pill Text Color/Hover	Changes the text color inside the pill, with a different color on hover.
Pill Line Height	Adjusts the line height within the pill for text alignment.

Avatar

Name	Description
Avatar Image Object Fit	Determines how the avatar image should fit within its container. Options include 'fill', 'contain', 'cover', 'none', and 'scale-down'.

Pagination Buttons

Name	Description
Styling Settings	Customizes the appearance of pagination buttons, including color, size, and border properties.

Footer

Name	Description
Background Color	Sets the color of the footer's background.
Border Color	Defines the color of the footer's border.
Border Size	Adjusts the thickness of the border.
Border Style	Selects the style of the border.
Border Radius	Rounds the corners of the footer.