> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-data-table.md).

# 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](/experience-cloud/getting-started/reactive-components.md)
{% endhint %}

{% hint style="info" %}
**See it in a real project**

[Partner order desk](https://docs.avonnicomponents.com/projects/use-cases/portals-and-partner-sites/partner-order-desk): A partner order desk with inline edit and PDF upload.
{% endhint %}

## Getting Started

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

{% @arcade/embed url="<https://app.arcade.software/share/oAo6XOMWRBc7Vn4Y9XNd>" flowId="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="/projects/experience-cloud-components/create-an-export-to-button-on-the-data-table.md">Create an Export To button on the Data Table</a></td></tr><tr><td><strong>Configuring the Data Table</strong></td><td><a href="/projects/experience-cloud-components/configuring-the-avonni-data-table.md">Configuring the Avonni Data Table</a></td></tr><tr><td><strong>Displaying Salesforce CMS Files in a Data Table</strong></td><td><a href="/experience-cloud/tutorials/components/data-table/displaying-salesforce-cms-files-in-a-data-table.md">Displaying Salesforce CMS Files in a Data Table</a></td></tr></tbody></table>

## Configuration

### 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</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%2Fgit-blob-65b65bd9bce58e1f81a6f14daf8c4a781f806354%2F2024-05-06_10-20-35.png?alt=media" 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 Mapping

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%2Fgit-blob-065433424a25767ee86713b430c59ac74705e9f2%2F2023-12-10_20-56-54.png?alt=media" 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%2Fgit-blob-78e0e4f4e82d5bfe14b011a3427d80cb97988b8b%2F2023-12-10_20-58-01.png?alt=media" 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.
* **Actions:** Add your own entries to the column header's dropdown menu. Each action takes a **Label**, a **Name**, an **Icon Name**, and optional **Checked** and **Disabled** states, and carries its own **On Click** interaction.
* **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.

#### Filters

With a **Query** data source, **Filters** lists the fields users can filter the table by. Like **Search Fields**, it is mapped alongside the columns, so a filter can target a field that is not shown as a column. Each entry takes:

* **Filter By:** the field the filter applies to. Required.
* **Default Value (Optional):** the value the filter starts on when the page loads. The input matches the field's type, so a picklist field offers its values, a date field a date picker, and a checkbox field **True** or **False**.
* **Custom Label:** show your own text above the filter instead of the field's label. Turn it on, then enter the text in **Label**.

#### Search Fields

With a **Query** data source, **Search Fields** lists the object fields the search box searches across. It is mapped alongside the columns, so it can reach fields that are not shown as a column. The two search settings add up rather than replace each other: the search runs over the union of these fields and the fields behind every column marked **Searchable**.

#### Adding Row Actions

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

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

### 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%2Fgit-blob-62a2b6af2e9db471654d239cee0ba21a8af8d907%2F2023-12-10_21-00-20.png?alt=media" 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%2Fgit-blob-1d5e472575d42100ab98ab67386a331fe60b316a%2F2023-12-10_21-01-29.png?alt=media" 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%2Fgit-blob-aec8d037c0596b5e23a8bd4b53078a41fc6792a6%2F2023-12-05_08-55-05.png?alt=media" 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%2Fgit-blob-566a4863279a76cdc4ebf192ea145d345c96fb63%2F2023-12-05_09-00-09.png?alt=media" 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](/experience-cloud/properties-panel/interactions/navigate.md) for more information.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-5a8a3bb22b29ff4ef19c2175f4b9dd94706da340%2F2023-12-10_21-05-18.png?alt=media" alt=""><figcaption></figcaption></figure>

#### Tutorial

{% content-ref url="/spaces/dHOej9Pd5IxJNGEJMZKW/pages/5u7NY8IG7F8KC9xYxSSb" %}
[Create an Export To button on the Data Table](/projects/experience-cloud-components/create-an-export-to-button-on-the-data-table.md)
{% 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%2Fgit-blob-69854541e72faeba73f2c40524ff8d8769e46a7a%2F2023-12-05_09-16-35.png?alt=media" 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" %}
The search box appears once at least one column is marked **Searchable** — **Allow Search on All Columns** counts — or at least one **Search Field** is also a displayed column that is not a Time column.
{% endhint %}

<div><figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-6f2f9b260ebb9dfbd256274b92b44d87587c0143%2F2023-12-05_08-56-31.png?alt=media" alt=""><figcaption></figcaption></figure> <figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-422c97d012ceb51b5a9a8767464a63e8e53c7392%2F2023-12-05_08-57-12.png?alt=media" alt=""><figcaption><p>A column set on "Searchable" — the usual way to display the search box.</p></figcaption></figure></div>

### Settings Reference

#### General

**Api Name** is a unique identifier used to reference the component (3 to 30 characters; letters, digits, underscores and dashes).

**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 Edit and Selection** caps how many rows can be edited or selected at once; a row that is both edited and selected counts as one. **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 Column Width** and **Min Column Width** set the 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 width increment, in pixels, by which a column changes when resized.

**Sorted Direction** sets the direction the table is sorted in on load and **Default Sort Direction** the direction applied when a column is first sorted — **Ascending** or **Descending** for both. **Show Sorted By Value** displays which column is currently used for sorting.

**Header Title** and **Header Caption** set the header title and caption, each with its own **Header Title Text Style** / **Header Caption Text Style**. **Header Icon Name** adds a header icon and **Header Icon Size** sets its size (**Medium** by default), and **Header Is Joined** visually connects the header with the table body. **Hide Header Actions**, **Disable Header Actions**, **Visible Header Actions Buttons**, and **Header Actions** control the visibility, availability, count, and definition of the header action buttons.

#### Pagination and Search

**Pagination Attributes** holds the paging controls: **Show Pagination** renders them, **Number of Items per Page** sets how many records each page holds (or, with pagination off and a fixed table height, how many records load at a time), **Alignment** places the controls **Left**, **Center** or **Right**, and the **First**, **Previous**, **Next** and **Last** buttons each take their own **Button Label** and **Button Icon Name**.

**Pill Container Attributes** show the selected rows as pills: **Show Pill Container Selected Item** turns the container on, **Label Field** chooses the field whose value labels each pill, **Sortable** lets users reorder them, and **Single Line** keeps them on one line.

**Search Engine Attributes** configure the search box: **Placeholder** sets its placeholder text, **Position** places it **Left**, **Right**, **Center**, **Fill** or **Panel** (in the side panel), and **Default Search Value** pre-populates it.

#### Filtering

**Filter Menu Attributes** configure the per-column filters. **Type** places them **Horizontal** (the default) across the top, in a **Popover**, or in a **Panel** beside the table. **Picklist Filter Sort Order** sets the order picklist values appear in (**Ascending**, the default, **Descending**, or **Default Order of Field**), **Use Record Picklist Values** derives a picklist filter's options from the values present in the records rather than the field's full value set, and **Use Cascading Filter Values** narrows the other filters' options to match the current selection (taking precedence over **Use Record Picklist Values**).

Every filter also carries an operator, picked from a menu at the top of the filter. Text, picklist, multi-select picklist and lookup filters offer **Equals** (the default), **Not Equals**, **Empty** and **Not Empty**. Number, date and time filters offer **Between** (the default), **Not Between**, **Equals**, **Not Equals**, **Less Than**, **Less or Equal**, **Greater Than**, **Greater or Equal**, **Empty** and **Not Empty**. **Empty** and **Not Empty** take no value, so the filter's inputs are hidden while either is selected. Checkbox filters have no operator menu.

#### Side Panel

**Side Panel Attributes** configure the panel beside the table. It only appears once the search or the filter menu is positioned in it — **Position** set to **Panel** in **Search Engine Attributes**, or **Type** set to **Panel** in **Filter Menu Attributes**.

* **Position:** which side the panel sits on, **Left** (the default) or **Right**.
* **Closed by Default:** starts the panel collapsed. Off by default.
* **Hide Toggle Button:** removes the header button users open and close the panel with. Off by default.
* **Reset Button Label:** the label of the button that clears every filter selection. `Clear all selections` by default.

#### No Results Message

**No Results Message** replaces the default empty state with your own text when no row matches the search or the filters — or when the data source returns nothing at all. **No Results Message Attributes** controls what that empty state shows: **Hide No Results Image** drops the illustration and **Hide No Results Message** drops the text. Both are off by default.

## Styling

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

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

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

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

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

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

{% tab title="Pagination Buttons" %}

| Name                 | Description                                                                                    |
| -------------------- | ---------------------------------------------------------------------------------------------- |
| **Styling Settings** | Customizes the appearance of pagination buttons, including color, size, and border properties. |
| {% endtab %}         |                                                                                                |

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

{% tab title="Filters Panel" %}
Styles the side panel that holds the filters and search.

* **Filters Panel:** Background Color / Border Color / Border Size / Border Style / Border Radius.
* **Filters Panel Labels:** Background / Background Active / Background Hover; Collapse Icon Color; Color / Color Active / Color Hover; Font Size / Font Weight.
* **Filters Panel Options:** Color; Checkbox Border Color; Load More Button Text Color / Text Color Active / Text Color Hover.
* **Filters Panel Reset Button:** Background Color / Text Color / Border Color / Border Size / Border Radius.
  {% endtab %}
  {% endtabs %}

## Use Cases

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

{% @arcade/embed url="<https://app.arcade.software/share/sxcJn4NliMFN6qTRk5Mi>" flowId="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="/pages/tdtKnwgkHtOZ2VWtSGLb" %}
[Linked Data Tables](/experience-cloud/tutorials/reactive-components/linked-data-tables.md)
{% endcontent-ref %}

***

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

{% @arcade/embed url="<https://app.arcade.software/share/tZa89LmaWt8n5CoQhwB8>" flowId="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 %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-data-table.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.