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

{% hint style="success" %}
The Avonni Data Table is a [Reactive Data Component](https://docs.avonnicomponents.com/experience-cloud/getting-started/reactive-components)
{% endhint %}

***

## Getting Started

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

{% @arcade/embed flowId="oAo6XOMWRBc7Vn4Y9XNd" url="<https://app.arcade.software/share/oAo6XOMWRBc7Vn4Y9XNd>" %}

***

## Tutorials

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Create an Export To button on the Data Table</strong></td><td><a href="https://app.gitbook.com/s/dHOej9Pd5IxJNGEJMZKW/experience-cloud-components/create-an-export-to-button-on-the-data-table">Create an Export To button on the Data Table</a></td></tr><tr><td><strong>Configuring the Data Table</strong></td><td><a href="https://app.gitbook.com/s/dHOej9Pd5IxJNGEJMZKW/experience-cloud-components/configuring-the-avonni-data-table">Configuring the Avonni Data Table</a></td></tr><tr><td><strong>Displaying Salesforce CMS Files in a Data Table</strong></td><td><a href="../tutorials/components/data-table/displaying-salesforce-cms-files-in-a-data-table">displaying-salesforce-cms-files-in-a-data-table</a></td></tr></tbody></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.

<table><thead><tr><th>Data Source Type</th><th width="250.33333333333331">Description</th><th>Use Case</th></tr></thead><tbody><tr><td><strong>Manual Data Source</strong></td><td>Manually input data into the data table.</td><td>Ideal for non-dynamic data, testing, and demos.</td></tr><tr><td><strong>Query</strong></td><td>Create a query to auto-populate the table with Salesforce data.</td><td>Suited for dynamic, real-time, and large datasets.</td></tr><tr><td><strong>CMS Collection</strong></td><td>Seamlessly display your CMS Collections within Data Tables for dynamic content updates.</td><td>Create automatically updating resource lists or news feeds.</td></tr></tbody></table>

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F3PwcU320If3fDaiBQLyt%2F2024-05-06_10-20-35.png?alt=media&#x26;token=fcf364f1-14a1-4421-ab0b-9b360c71ec68" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
In Query mode, data is shown in batches of 25 records to maintain optimal site performance.
{% endhint %}

### Data Mappings Configuration

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

<details>

<summary>Data Model Sharing with Avonni Data Table</summary>

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

</details>

#### Adding Columns

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

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FE2cKSG6IyYXg6PT5EEU1%2F2023-12-10_20-56-54.png?alt=media&#x26;token=46cc7e51-eb28-4925-9842-50b3d91255bf" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FNlSXCo4bj0fPee0FFPtt%2F2023-12-10_20-58-01.png?alt=media&#x26;token=b0626d49-1d47-42be-a092-08baf64024ef" alt=""><figcaption></figcaption></figure>

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

{% @arcade/embed flowId="db617gnzKCL8QA22aziq" url="<https://app.arcade.software/share/db617gnzKCL8QA22aziq>" %}

***

## Other Configuration Settings

### Basic Settings

**Hide Table Header**

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

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FqSHMEKEbljIMwDFR7JQw%2F2023-12-10_21-00-20.png?alt=media&#x26;token=2a5788ad-e9d1-421c-a1a8-159567f6a6d4" alt=""><figcaption></figcaption></figure>

**Hide Checkbox Columns**

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

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FBSnbhKLYW291nhWopETy%2F2023-12-10_21-01-29.png?alt=media&#x26;token=e156517b-4d21-4a1c-bbe3-3acc91e8f267" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FdlHeul0BOJuSLxlwxlrr%2F2023-12-05_08-55-05.png?alt=media&#x26;token=7569d3b6-f011-41fe-85cd-44eba513cced" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FpflegSFq3ppt9e1bFJpT%2F2023-12-05_09-00-09.png?alt=media&#x26;token=33633798-ff4e-4812-8075-71ba4deafbed" alt=""><figcaption></figcaption></figure>

#### 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](https://docs.avonnicomponents.com/experience-cloud/properties-panel/interactions/navigate) for more information.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FP3G4hQaPYgAYh4qxlE6V%2F2023-12-10_21-05-18.png?alt=media&#x26;token=2617f41f-3045-4cf0-83e2-5ae3455deef4" alt=""><figcaption></figcaption></figure>

#### Tutorial

{% content-ref url="<https://app.gitbook.com/s/dHOej9Pd5IxJNGEJMZKW/experience-cloud-components/create-an-export-to-button-on-the-data-table>" %}
[Create an Export To button on the Data Table](https://app.gitbook.com/s/dHOej9Pd5IxJNGEJMZKW/experience-cloud-components/create-an-export-to-button-on-the-data-table)
{% endcontent-ref %}

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

{% hint style="info" %}
In Query mode, data is displayed in sets of 25 records to keep site performance optimal. Therefore, setting up pagination can be beneficial.
{% endhint %}

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FTYV8JFlB7hI8aXbiio5z%2F2023-12-05_09-16-35.png?alt=media&#x26;token=fcd3ecdc-5c47-4ae2-8140-947a219bd9b9" alt=""><figcaption></figcaption></figure>

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

{% hint style="info" %}
To display the search box, at least one column must be marked as 'Searchable'.
{% endhint %}

<div><figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FNxORNYAA6GqNWdTGaNvL%2F2023-12-05_08-56-31.png?alt=media&#x26;token=4dcc78d0-e09b-4058-a130-da98a081cbe1" alt=""><figcaption></figcaption></figure> <figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FjwElPRwuNrGJbdSHAdZO%2F2023-12-05_08-57-12.png?alt=media&#x26;token=9145311c-b2b7-49f6-b82c-d1c721f9f77c" alt=""><figcaption><p>At least one column must be set on "Searchable" to display the search box.</p></figcaption></figure></div>

## Settings

{% tabs %}
{% tab title="🎛️ 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                                 |
| {% endtab %}                       |                                                                        |

{% tab title="⏩️ 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 |
| {% endtab %}             |                                                  |

{% tab title="🗄️ 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. |
| {% endtab %}          |                                                                                              |

{% tab title="🎨 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.          |
| {% endtab %}         |                                            |
| {% endtabs %}        |                                            |

## Use Case Examples

### Example 1 : Enhanced Accounts list and related contacts

{% @arcade/embed flowId="sxcJn4NliMFN6qTRk5Mi" url="<https://app.arcade.software/share/sxcJn4NliMFN6qTRk5Mi>" %}

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

{% stepper %}
{% step %}

#### **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.
  {% endstep %}

{% step %}

#### **Choose a data source**

* Select **Query Accounts** as the data source for this component.
  {% endstep %}

{% step %}

#### **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.
  {% endstep %}

{% step %}

#### **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`.
  {% endstep %}

{% step %}

#### **Customize the header**

* Set the **Header Title** to `Accounts`.
* Set the **Header Icon** to `standard:account_info`.
  {% endstep %}

{% step %}

#### **Add the second AX - Datatable to your page**

* Drag a second AX - Datatable component into the right column of the same page.
  {% endstep %}

{% step %}

#### **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.
  {% endstep %}

{% step %}

#### **Set your data mappings**

* Add the following columns: Name and Title.
  {% endstep %}

{% step %}

#### **Configure the component**

* Set the **API Name** to `relatedContactsTable`.
  {% endstep %}

{% step %}

#### **Customize the header**

* Set the **Header Title** to `Related Contacts`.
* Set the **Header Icon** to `standard:contact`.
  {% endstep %}

{% step %}

#### **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.
  {% endstep %}
  {% endstepper %}

***

#### **Links**

{% content-ref url="../tutorials/reactive-components/linked-data-tables" %}
[linked-data-tables](https://docs.avonnicomponents.com/experience-cloud/tutorials/reactive-components/linked-data-tables)
{% endcontent-ref %}

***

### Example 2 : Related Opportunities on an Account page

{% @arcade/embed flowId="tZa89LmaWt8n5CoQhwB8" url="<https://app.arcade.software/share/tZa89LmaWt8n5CoQhwB8>" %}

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

{% stepper %}
{% step %}

#### **Add the AX - Datatable to your Account page**

* Drag an AX - Datatable component onto your Account record page in Experience Builder.
  {% endstep %}

{% step %}

#### **Choose a data source**

* Select **Query Opportunities** as the data source for this component.
  {% endstep %}

{% step %}

#### **Set your data mappings**

* Add the following columns: Name, Stage, and Amount.
* Enable **Linkify** on the Name column so opportunity names become clickable links.
  {% endstep %}

{% step %}

#### **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.
  {% endstep %}

{% step %}

#### **Customize the header**

* Set the **Header Title** to `Opportunities`.
* Set the **Header Style** to `Heading 2`.
* Set the **Header Icon** to `standard:opportunity`.
  {% endstep %}

{% step %}

#### **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.
  {% endstep %}
  {% endstepper %}