New in October Hierarchy mode: the whole tree from any record →

One Salesforce tree grid. Every level, every surface.

Show parent and child records as one grid people can expand, read and act on. Open it from any account and it climbs to the top of the hierarchy. Configure it once, then place it in a Screen Flow, on a Lightning page or on an Experience site.

Start freeExplore the documentation
30+
column types
3
surfaces, native on each
0
lines of Apex
Salesforce · Meridian Chicago Hub
01Set up in the Component BuilderTurn on Hierarchy mode, pick Parent Account as the lookup and pass the record Id.
02Used by an account managerOpened from Meridian Chicago Hub, the grid climbs to Meridian Group, marks the hub and loads each branch as it opens.

Filmed in real Salesforce orgs: the setup first, then the screen people use.

The grid itself

A hierarchy people can read at every level

A flat table repeats the parent on every row. A tree grid shows it once, with its children under it. Four things people do with it, each filmed in a real Salesforce org, each turned on with a property.

01
Read every level in columns

Currency, percent, badges, progress bars and avatars: the Data Table's 30+ column types, on parents and children alike.

columns · type · typeAttributes
02
Mix objects in one tree

An account, its opportunities, then the contacts on each deal. Each level comes from its own object and its own query.

itemsSObjectMapping · nestedMappings
03
Act on a row or a column

Each row carries its actions, such as logging a call or opening a flow. Column headers carry their own, wired to an interaction the same way the Data Table does it.

rowActions · headerActions · evtColumnHeaderActionClick
Read every level in columns · Lightning pageOwners, revenue, growth, plan attainment and rating on every level, then the grid sorted by annual revenue under each parent
Same component, every surface

Configure the hierarchy once, use it everywhere

The Tree Grid ships in three Avonni component sets, with the same columns, the same actions and the same behaviour. In your own code, LWC Components gives you the Tree.

Screen Flows
Inside a guided flow
Let users pick records across a hierarchy before the next step. Selected rows leave the grid as outputs of the screen.
Flow Screen Components →
Lightning pages
On a record or app page
Build it in the Component Builder, point it at a query or at the record's own hierarchy, and place it anywhere the App Builder lets you drop a component.
Dynamic Components →
Experience sites
In a portal your customers see
The Tree Grid is native in Experience Builder. Customers and partners expand their own accounts, sites or projects on your site.
Experience Cloud Components →
Your own code
As a Lightning Web Component: the Tree
LWC Components has no Tree Grid. The data driven Tree builds the same parent and child structure from a query, with one label per level.
<avonni-dd-tree
  query={accountsQuery}
  mapping={accountMapping}
  show-item-count>
</avonni-dd-tree>
LWC Components →
What's new

Shipped this year, live today

Every item below is in the current release, on the packages named.

October 2026
Hierarchy mode.

Give the grid a parent lookup and the current record Id. It climbs to the top of that branch, draws the whole tree and marks the row you came from.

Lightning pages, Screen Flows, Experience sites
October 2026
Header actions on a column.

Columns carry their own header actions, each wired to a Column Header Action Click interaction.

Lightning pages, Screen Flows, Experience sites
October 2026
Open fully expanded.

A Tree Grid can open with every level showing, for the short trees people read in one glance.

Lightning pages, Screen Flows
August 2026
On Lightning pages and Experience sites.

The Tree Grid reached the Component Builder and Experience Builder, with the Data Table's column types, sorting, row selection and load more.

Lightning pages, Experience sites
July 2026
In Screen Flows.

The Tree Grid arrived in Flow Screen Components, building the hierarchy from a query.

Screen Flows

Users ask, we ship.

See every shipped idea
Live in the Playground

The Tree Grid, in 20+ live examples.

Real screens built with Avonni, one industry job each. Open one to see it run and copy its code, or try the Tree Grid on its own and change any property live.

Try the Tree Grid live →
Dealer warranty claim example in the Avonni Playground: a Tree Grid of parts and labor lines in a Screen Flow
Screen Flows · Manufacturing
Dealer warranty claim
Open it live →
Course catalog example in the Avonni Playground: a Tree Grid of programs and their required courses on an Experience site
Experience Sites · Education
Course catalog
Open it live →
Patient portal home example in the Avonni Playground: lab results in a Tree Grid on an Experience site
Experience Sites · Healthcare
Patient portal home
Open it live →

Where the standard hierarchy view stops

Salesforce's View Account Hierarchy opens the tree on a page of its own. The Tree Grid puts the same tree on the record, in a flow or on a portal, with your columns and your actions. Two things it does not do yet: search inside the grid, and an expand all button for users. You can open it fully expanded instead, best kept for trees of a few hundred rows.

Browse the component library
30+
column types, from currency to progress bars
1
lookup field to draw the whole hierarchy
3
surfaces where it runs natively
Questions

Tree Grid, answered

Where do I get the Tree Grid?
It ships in three Avonni component sets: Flow Screen Components for screen flows, Dynamic Components for Lightning pages and Experience Cloud Components for portals. LWC Components has the Tree, not the Tree Grid. Every plan includes the packages.
Can it show the parent accounts, not only the children?
Yes, with Hierarchy mode, shipped in October 2026. Give it a parent lookup field and the current record Id: it climbs to the top of that branch and draws the tree from there. Without it, the grid builds downward from the records your query returns.
Which objects does it work with?
Any object you can query. Hierarchy mode follows a lookup to the same object, such as Parent Account. On Lightning pages, each level can also come from another object, such as the opportunities under an account.
Does a large hierarchy load all at once?
No. In Hierarchy mode, deeper levels load as users open them. You can also open the grid fully expanded; keep that for trees of a few hundred rows, since every row then loads up front.
Can a flow use the rows people select?
Yes. Selected rows leave the grid as outputs of the screen, ready for the next element of your flow.
Can users search the grid?
Not today. Users sort the columns, and on Lightning pages and portals they can filter them.
Does any of this need Apex?
No. The query, the levels, the columns and the actions are all configured in the builder.
Can I try it before paying?
Yes. Every Avonni plan starts with 10 free licenses, which is enough to build the grid, put it in front of a real team and decide from there.

Other components

See where another component runs, and how it is configured.

Data TableKanbanCalendarTimelineMapPivot TableChatListBrowse all components

Build your first hierarchy this afternoon

Install the package, point the Tree Grid at an account and see the whole hierarchy in your own org before the day is out.

Start freeTalk to sales