Building a Dynamic Tree Grid in Lightning Web Component

In Salesforce applications, data often exists in hierarchical relationships, such as Accounts and Contacts, Opportunities and Products, or Custom Parent-Child records. Displaying such data in a simple table can be limiting and hard to understand. This is where the Lightning Tree Grid becomes important. It lets users view nested, expandable data structures in a single view, improving data visibility and user experience. In this post, we will learn to create a dynamic tree grid in Lightning Web Component.

Building a static tree grid tied to one object structure is not scalable. In real-world scenarios, business requirements evolve, and data models vary across use cases and industries. A dynamic tree grid solves this by allowing administrators or developers to define

• The parent and child objects
• The fields to display for each

This eliminates hardcoding and enables reusability across multiple modules, saving development time and enhancing flexibility.

Check out the post Generic DataTable in Lightning Web Component to create a dynamic data table in LWC.

Steps to build a dynamic tree grid

1. Create custom metadata types
2. Create Apex Class
3. Create Lightning Web Component
4. Test Lightning Web Component

1. Create custom metadata types

To make the dynamic tree grid, we need to pass parent and child data at runtime. These data will be fetched from different objects using SOQL. We will use a custom metadata type for storing these object details.

We will create two custom metadata types, one for the parent objects and another for child objects. Two custom metadata types are required, as we cannot self-reference custom metadata types.

Parent Custom Metadata Type

Let us create a custom metadata type ParentObjectSetting__mdt and add the below fields to it.

Field API Name	Type	Description
ObjectName__c	Text	API name of the parent object
FieldsName__c	Long Text	Comma-separated field names
IsActive__c	Checkbox	Whether this parent is active. So that we can enable/disable tree grids at runtime.
WhereCondition__c	Long Text	Optional WHERE clause (e.g. Industry=’Tech’)

Child Custom Metadata Type

Let us create a custom metadata type ChildObjectSetting__mdt and add the following fields to it.

Field API Name	Type	Description
ObjectName__c	Text	API name of the child object
FieldsName__c	Long Text	Comma-separated field names
ParentObject__c	Text	Related parent object API name
IsActive__c	Checkbox	Whether this child is active
WhereCondition__c	Long Text	Optional WHERE clause for child records

Add sample data to these custom metadata objects.

ParentObjectSetting__mdt

Object Name	Fields Name	Is Active	WhereCondition
Account	Name,Industry	true	Industry = ‘Tech’

ChildObjectSetting__mdt

Object Name	Fields Name	Parent Object	Relationship Name	Is Active
Contact	FirstName,LastName,Email	Account	Contacts	true
Opportunity	Name,StageName,Amount	Account	Opportunities	true

2. Create Apex Class

Let us create Apex classes, ParentChildDataController, and ParentChildDataService, that will fetch dynamic parent-child hierarchical data based on the above-mentioned custom metadata configurations. This class is optimized for use with a Lightning Web Component (LWC) that renders the data in alightning-tree-grid.

This Apex class dynamically constructs a SOQL relationship query using metadata from two custom metadata types:

1. ParentObjectSetting__mdt – Defines the parent object, fields to display, and any filters.
2. ChildObjectSetting__mdt – Defines child objects related to the parent, fields to display, the child relationship name, and optional filters.

It returns a hierarchical List<Map<String, Object>>, where:

• Each map represents a parent record
• Each parent may contain a _children key with a list of its related child records. This property is required for child grid creation in the tree grid.
• Each child is also a map of its own field-value pairs

3. Create Lightning Web Component

Create a Lightning web component, the dynamicTreeGrid to display hierarchical parent-child Salesforce data in a user-friendly, expandable format using <lightning-tree-grid>.

This component is fully dynamic; it automatically renders data of any object based on configuration.

4. Test Lightning Web Component

Add the above-created Lightning web component in any record or home page. It will display data on page load.

Benefits of Dynamic Tree Grid

Benefit	Explanation
Dynamic Data	Data is fetched using configured metadata, not hardcoded objects/fields
Reusable	The same component can display any hierarchy data
Efficient SOQL	Uses subqueries to reduce API/database calls
Admin Configurable	Metadata setup allows no-code adaptability. Admin can change/add configuration at runtime.
Intuitive UI	Expandable rows for clear visualization of data levels

References

Lightning Tree Grid

Similar Posts

• How to Export Data in Excel with SheetJS in LWC
• How to Build a Generic Modal Window in Lightning Web Component
• Ultimate Guide to URL Accessibility in LWC
• Dynamically Instantiate Components in LWC
• Generic Notification Component in LWC
• Reusable Custom Calendar LWC using FullCalendar Js Library
• Custom Toast with custom duration In LWC
• Dynamic Interaction Between Two LWCs
• Sending Wrapper object to Apex from LWC
• HeatMap Chart In LWC
• Generate and Create Signature in LWC
• Option Group in LWC Select
• Generate OTP in LWC
• Custom Salesforce Knowledge Component using LWC
• Show Category wise Knowledge Article using LWC

Need Similar Component

Check out our gig for the development of Lightning Web Components, Apex, or Integration.