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

---

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

---

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

🎛️ 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

🗄️ Filtering and Data Source

🎨 Styling

Use Case Examples

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.