> 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 — such as 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.

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

### Data Mapping

Define the table's columns by mapping each one to a field from the selected data source. For every column you can set:

* **Field:** the source field the column binds to (for query sources, choose the object field or a custom field).
* **Label:** the text shown in the column header — override the default with a custom label when needed.
* **Data Type:** how the value is formatted (for example text, number, currency, date, percent, URL, boolean, or avatar), with type-specific attributes for the chosen type.
* **Sortable:** whether users can sort the table by this column.
* **Wrap Text:** whether long cell text wraps instead of truncating.
* **Hidden:** whether the column is hidden from view.
* **Initial Width:** the column's starting width.
* **Cell Attributes:** the content alignment and an optional cell icon and its position.

### General

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

**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 a count of the currently selected rows.

**Show Row Number Column** adds a column that numbers each row, and **Row Number Offset** sets the starting number for that numbering.

### 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. **Header Is Joined** removes the header's bottom border radius and shadow so it sits flush with the table below.

### Column Widths

**Columns Widths Mode** chooses `fixed` or `auto` column widths. **Max Column Width** and **Min Column Width** 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: **Expanded** is shown when a row is open and **Collapsed** when it is closed. Both accept a Lightning Design System icon name.

### Header Actions

Configure action buttons that appear in the table header. Each action has a **Label**, an **Icon Name**, a hover **Title**, and **Alternative Text** for the button icon. Configure what each button does in its **On Click** section — see the [Navigate](/experience-cloud/properties-panel/interactions/navigate.md) interaction for how these behave. **Visible Header Actions Buttons** sets how many action buttons are shown before the rest collapse into a menu.

### Pagination

**Number of Items per Page** sets how many additional rows are loaded at a time as the user pages through the data.

### Sorting

**Default Sort Direction** sets the direction (`asc` or `desc`) applied when a column is first sorted.

## Styling

{% tabs %}
{% tab title="Size" %}
Controls the component's dimensions.
{% endtab %}

{% tab title="Margin" %}
Controls the outer spacing around the component.
{% endtab %}

{% tab title="Padding" %}
Controls the inner spacing of the component.
{% endtab %}

{% tab title="Flow Dialog" %}
Controls the appearance of the component when it is displayed inside a flow dialog.
{% endtab %}

{% tab title="Flow Panel" %}
Controls the appearance of the component when it is displayed inside a flow panel.
{% 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-tree-grid.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.