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.
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 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
Controls the component's dimensions.
Controls the outer spacing around the component.
Controls the inner spacing of the component.
Controls the appearance of the component when it is displayed inside a flow dialog.
Controls the appearance of the component when it is displayed inside a flow panel.
Last updated
Was this helpful?