> 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-tree-grid.md). # AX - Tree Grid **AX - Tree Grid** is an Experience Cloud component that displays hierarchical data in a tree structure on Experience Sites pages (formerly Community Cloud), with expandable and collapsible rows and optional row selection. ## Overview Use the Tree Grid to present parent-child data (accounts and their related contacts, categories and sub-categories, or any records that nest) in a single table where users expand and collapse rows to drill into the hierarchy. Each column is mapped to a field from your data source, and rows can be selected, sorted, and paginated. With a **Query** data source, the levels either come from different related objects or from one object that looks up to itself — an account hierarchy, a reporting chain, a category tree. **Mode** on the query decides which, and **Hierarchy** mode centers the tree on a record you point it at.

Three levels of nesting, every parent row expanded. The first column carries the toggle icon and indents each level.

## Configuration Add the component to your page in Experience Builder, then configure it from the property panel on the right. ### Data Source The Data Source section is where you connect the Tree Grid to your data. Two source types are available. | Data Source Type | Description | Use Case | | ---------------- | ------------------------------------------------------------------------ | ----------------------------------------------- | | **Manual** | Enter the rows and their columns directly in the builder. | Ideal for non-dynamic data, testing, and demos. | | **Query** | Build a query that maps Salesforce object fields to the table's columns. | Suited for dynamic, real-time data. | #### Building the hierarchy * **Query:** choose the parent object in **Object API Name**, then pick how the levels are built with **Mode**, at the bottom of the query editor: * **Multi-Level** (the default): add each related child object under **Child Items** with **Add Item**. Each object in the query tree becomes one level of expandable rows, and a parent row loads its children when the user expands it. * **Hierarchy:** follow a lookup the object has to itself, so every level holds the same object. Choose it in **Parent Lookup Field** — the list offers the object's self-lookups only — and set **Current Record ID** in the component's settings. The tree is then built from that record's top-level ancestor down, with the branch leading to the current record expanded and the row itself marked with a **current** badge. The query's filters and **Order By** apply to every level, and the hierarchy is followed up to 50 levels deep. Both settings are needed: without a **Parent Lookup Field** the component reports that hierarchy mode requires a parent lookup field and a record ID, and the Experience Builder preview reports the same while **Current Record ID** is empty. On a live page, a **Current Record ID** that is empty or points at a record the query can't reach leaves the grid showing its **No Results Message** empty state. * **Manual:** define the columns (each with a **Label** and a **Name**), choose the **Key Field** that uniquely identifies each row, then enter the rows under **Data** and add child rows under a row to create the nesting.

A Query data source on Account, with Contact added as the child level, and one column mapped from each object.

### Data Mapping For a **Query** source, define the table's columns in **Data Mappings**. Each column is either an **Object Field**, which shows a field from one object in the hierarchy (set its **Object API Name**, then its **Source Field**), or **Custom**, a column with no field behind it (identified by its **Name**). For every column you can set: * **Source Field:** the field the column binds to. * **Label:** the text shown in the column header. Turn on **Custom Label** to override the field's own label. * **Type:** how the value is formatted and edited (`text` by default). Over 30 types are available, including text, number, currency, date, percent, email, phone, URL, badge, avatar, progress bar, rating and rich text, with type-specific attributes for the chosen type. The **action**, **button** and **button-icon** types add row actions (see below). * **Icon Name:** an icon for the column. * **Sortable:** whether users can sort the table by this column. * **Wrap Text:** whether long cell text wraps instead of truncating. Offered for the currency, date, email, location, number, percent, phone, text, time and URL types. * **Hidden:** whether the column is hidden from view. * **Initial Width** (advanced setting): the column's starting width. * **Cell Attributes:** the content alignment and an optional cell icon and its position. Offered for some types only. * **Actions:** your own entries in 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. A **Manual** source's columns take a **Label**, a **Name** and the same column header **Actions**, and display their values as text. The first column is always the tree column: it shows the expand icon and each row's label, whatever type you set for it. #### Row actions Columns of type **action**, **button** or **button-icon** have their own **On Click** interaction, which runs with the clicked row available as `{{Record.}}`. Use them to open a record, launch a flow, or run any other interaction from a row. ### General **API Name** is a unique identifier used to reference the component (3 to 30 characters; letters, digits, underscores, and dashes). **Current Record ID** is the Id of the record the tree centers on in **Hierarchy** mode: the tree shows that record's ancestors and descendants, and the row carries a **current** badge. On a record page, set it to the `{!recordId}` expression so the tree follows the record the user is viewing. It has no effect in **Multi-Level** mode. **Hide Table Header** removes the table's header row, and **Hide Checkbox Column** removes the column used for row selection. **Show Number of Items Selected** displays "N items selected" in the header while rows are selected. Whenever rows are selected, the header also offers a **Clear selection** link. **Show Row Number Column** adds a column that numbers each row, and **Row Number Offset** shifts that numbering: the first row shows the offset plus one (0 by default, so numbering starts at 1). ### Header **Header Title** and **Header Caption** add a title and a supporting caption above the table; **Header Title Text Style** and **Header Caption Text Style** set the text style of each (a heading or paragraph style). **Header Icon Name** adds an icon beside the title, and **Header Icon Size** sets its size (**Xxs**, **Xs**, **Small**, **Medium** by default, or **Large**). **Header Is Joined** removes the header's bottom border radius and shadow so it sits flush with the table below.

A header with its caption, title, icon and two header actions, plus the row number column and custom toggle icons (utility:dash for an open row, utility:add for a closed one).

### Column Widths **Columns Widths Mode** chooses **Fixed** or **Auto** column widths. **Max Column Width** (1000 px by default) and **Min Column Width** (50 px by default) set the width limits, and **Resize Column Disabled** turns off manual column resizing. ### Row Toggle Icon Set the icons used to expand and collapse a row: **Open Icon Name** is shown when a row is open (`utility:chevrondown` by default) and **Close Icon Name** when it is closed (`utility:chevronright` by default). Both accept a Lightning Design System icon name. ### Header Actions Configure action buttons that appear in the table header. Each action has a **Label**, a **Name**, an **Icon Name**, a hover **Title**, and **Alternative Text** for the button icon (an advanced setting). Configure what each button does in its **On Click** section: Show Toast, Navigate, Download, Open Alert Modal, Open Confirm Dialog, Open Flow Dialog, Execute Flow, Refresh All Queries or Refresh Query. Most have their own page under Interactions, for example [Navigate](/experience-cloud/properties-panel/interactions/navigate.md). **Visible Actions Buttons** sets how many action buttons are shown before the rest collapse into a menu. These are the table's own header buttons. The dropdown menu on an individual column header is configured separately, in that column's **Actions** setting under [Data Mapping](#data-mapping). ### Pagination **Number of Additional Rows** (100 by default, from 1 to 500) sets, for a **Query** source, how many more rows load each time the user reaches the end of a level. Loading more rows is not active in the Experience Builder preview. ### Sort **Default Sort Direction** sets the direction (**Ascending** or **Descending**) applied when a column is first sorted. ### No Results Message **No Results Message** replaces the default empty state with your own text when the data source returns no rows. **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="Margin" %} Controls the outer spacing around the component. {% endtab %} {% tab title="Padding" %} Controls the inner spacing of the component. {% endtab %} {% tab title="Size" %} Controls the component's dimensions. {% endtab %} {% tab title="Border" %} Controls the border around the tree grid (Color / Size / Style / Radius). {% endtab %} {% tab title="Header" %} Sets the header's background color, its internal padding, and the space below it. {% endtab %} {% tab title="Header Border" %} Sets the color, size, style and radius of the header's border, and the bottom border used when **Header Is Joined** is on. {% endtab %} {% tab title="Header Title" %} Sets the color, font size, font weight and font style of the header title. {% endtab %} {% tab title="Header Caption" %} Sets the color, font size, font weight and font style of the header caption. {% endtab %} {% tab title="Flow Dialog & Panel" %} Styles the dialog or side panel opened by an **Open Flow Dialog** or **Open Flow Panel** interaction, in four groups: **Flow Dialog Header**, **Flow Dialog Footer**, **Flow Panel** and **Flow Panel Header**. {% endtab %} {% endtabs %} --- # 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-tree-grid.md?ask=&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.