Lightning Web Component Tree Grid

Let us discuss here how to use  Lightning Web Component Tree Grid.A lightning-tree-grid component displays hierarchical data in a table. Its appearance resembles lightning-datatable, with the exception that each row can be expanded to reveal a nested group of items. Rows that contain nested data display a chevron icon to denote that they can be expanded or collapsed. This visual representation is useful for displaying structured data such as account hierarchy or forecasting data. Each column’s formatting is determined by its data type. For example, a phone number is displayed as a hyperlink with the tel: URL scheme by specifying the phone type. The default type is text .

Please refer to this link for Lightning web component environment setup 

 

1.Apex Class 

Create an apex class using the below SFDX command

Use this apex code in the TreeGrid Class

 

2. Create a Lightning web component 

Create a lightning web component using this below SFDX Command

Here is the code for TreeGrid.html

Here is the TreeGrid.js JavaScript controller

Here are the TreeGrid.js-meta.xml configuration files

3.Push Changes to scratch org 

Now push the changes to scratch org using this SFDX command

Add this component to the record page using the lightning app builder. After adding to the record page you can able to the Tree grid as shown below