AX - Data Table

Overview

AX - Data Table is an Experience Cloud component that displays your Salesforce records in an interactive table on Experience Sites pages (formerly Community Cloud).

Use it to show portal users filtered datasets with full control over columns, sorting, searching, and pagination. Pull records from any standard or custom object and let external users view, search, and interact with data relevant to their account or profile.

Perfect for customer portals that show order history, partner portals that display order history, partner portals displaying shared records, or self-service sites where users need to find and view their own data.

The Avonni Data Table is a Reactive Data Component

Getting Started

Use this simple tutorial to learn the basics of the Data Table component and start building your use cases.

Tutorials

Create an Export To button on the Data Table

Configuring the Data Table

Displaying Salesforce CMS Files in a Data Table

Configuration

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

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 to create a more intuitive, visually appealing table.
• Editable: Decide if a column should be editable directly within the table.
• Filterable and Searchable: Enable per-column filtering and searching 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 to achieve a balanced, organized layout.

Adding Row Actions

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

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 placeholder text for the search box to guide users on what they can search for.
• Position: Choose the search box's position within the table layout for optimal accessibility.
• Default Search Value: Predefine a search value to filter the table data on load.

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 Reference

General

Hide Table Header hides the table's header, Hide Table Borders additionally hides the table's borders (only when Hide Table Header is also enabled), and Hide Checkbox Column removes the column used for row-selection checkboxes. Show Row Number Column displays a row-number column, and Row Number Offset sets the starting number for that numbering.

Max Row Selection limits the maximum number of rows that can be selected, Disabled Selection Rows Key Value lists the comma-separated key-field values of the rows that should be disabled for selection, Show Number of Items Selected displays the count of currently selected items, and Suppress Bottom Bar hides the bottom bar typically used for actions and information display.

Read Only makes the table non-interactive, disallowing edits or selections. Allow Edit on All Columns, Allow Filter on All Columns, Allow Search on All Columns, Allow Sort on All Columns, and Allow Wrap on All Columns turn on editing, filtering, searching, sorting, and text wrapping across every column, and Hide Default Actions hides pre-defined actions like edit or delete. Wrap Table Header wraps long header labels instead of truncating them.

Columns Widths Mode chooses fixed or auto column widths, Max/Min Column Width sets width limits, Wrap Text Max Lines caps the number of lines for wrapped cell text, Resize Column Disabled turns off column resizing, and Resize Step sets the increment for resizing.

Sorted/Default Sort Direction sets the initial sort direction (asc or desc), and Show Sorted by Value displays which column is currently used for sorting.

Header Title/Caption sets the header title and caption, Header Icon Name/Size adds a header icon with a chosen size, and Header is Joined visually connects the header with the table body. Hide/Disable Header Actions, Visible Header Actions Buttons, and Header Actions control the visibility, count, and definition of the header action buttons.

Pagination and Search

Show Pagination toggles the display of pagination controls, and Number of Items per Page sets how many items appear per page. The Pill Container option shows a container for selected items, often used with row selection.

For search, Placeholder sets the search input's placeholder text, Position defines the search bar's position, and Default Search Value pre-populates it with a default value.

Filtering and Data Source

Filtering Options configure filtering to display as a popover for each column. Data Source selects between manual and query for populating table data, and Columns defines and adds the table's columns, 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.

Use Cases

Example 1 : Enhanced Accounts list and related contacts

Give your partners a powerful, intuitive way to explore account data, with inline search, filtering, and a live contact panel that updates as they navigate.

---

What You'll Achieve

• Searchable, filterable account list: Let partners quickly find accounts by name or industry using built-in search and filter controls.
• Inline-linked records: Make account names clickable so partners can jump directly to record detail pages.
• Live related contacts panel: Display a second table that automatically refreshes to show contacts tied to whichever account is selected.
• Paginated results: Keep the interface clean and performant by limiting visible records per page.

---

Before You Begin

• Two-column page layout: Ensure your Account List page in Experience Builder already has a two-column layout ready to receive both components.

---

How to Set It Up

1

Add the first AX - Datatable to your page

• Drag an AX - Datatable component into the left column of your Account List page in Experience Builder.

2

Choose a data source

• Select Query Accounts as the data source for this component.

3

Set your data mappings

• Add the following columns: Name, Industry, Owner.FullName, and Phone.
• Enable Linkify on the Name column so account names become clickable links.
• Set Industry as a filter field.
• Set Name as a search field.

4

Configure the component

• Set the API Name to AccountsTable.
• Set Max Row Selection to 1 so only one account can be selected at a time.
• Enable pagination and set the Maximum Number of Records to 10.

5

Customize the header

• Set the Header Title to Accounts.
• Set the Header Icon to standard:account_info.

6

Add the second AX - Datatable to your page

• Drag a second AX - Datatable component into the right column of the same page.

7

Choose a data source for the contacts table

• Select Query Contacts as the data source.
• Add a filter so that AccountId equals {{AccountsTable.selectedRecord.Id}}, linking this table's results to whichever account is currently selected.

8

Set your data mappings

• Add the following columns: Name and Title.

9

Configure the component

• Set the API Name to relatedContactsTable.

10

Customize the header

• Set the Header Title to Related Contacts.
• Set the Header Icon to standard:contact.

11

Preview your page

• Click Preview in Experience Builder, select an account row, and confirm that the Related Contacts table updates dynamically to reflect the selected record.

---

Links

Linked Data Tables

---

Example 2 : Related Opportunities on an Account page

Give sales users an at-a-glance view of every opportunity tied to an account, right where they need it, without ever leaving the record page.

---

What You'll Achieve

• Richer customer 360 view: Surface key opportunity data directly on the Account page so sales users get the full picture in one place.
• Fully stacked record pages: Build dense, information-rich pages that eliminate the need to jump between tabs or objects to work a pipeline.

---

Before You Begin

• Account record page with existing components: Ensure your Account record page in Experience Builder already includes record details, a banner, and a column layout ready to host the new component.

---

How to Set It Up

1

Add the AX - Datatable to your Account page

• Drag an AX - Datatable component onto your Account record page in Experience Builder.

2

Choose a data source

• Select Query Opportunities as the data source for this component.

3

Set your data mappings

• Add the following columns: Name, Stage, and Amount.
• Enable Linkify on the Name column so opportunity names become clickable links.

4

Configure the component

• Set the API Name to RelatedOpportunities.
• Add a filter so that AccountId equals {!Item.id}, scoping results to the account currently being viewed.

5

Customize the header

• Set the Header Title to Opportunities.
• Set the Header Style to Heading 2.
• Set the Header Icon to standard:opportunity.

6

Preview your page

• Click Preview in Experience Builder and navigate to an Account record to confirm that only opportunities related to that account appear in the table.