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

sfdx force:apex:class:create -n TreeGrid   -d force-app/main/default/apex

Use this apex code in the TreeGrid Class

public with sharing class TreeGrid {
   @AuraEnabled(cacheable=true)
    public static List<AccountWrapper> getTreeGridData(){
        List<Account> accs = [Select Id , Name,(Select Id , Name from Contacts) from Account];
        List<AccountWrapper> aooo = new List<AccountWrapper>();
        for(Account a : accs){
            AccountWrapper aWraper = new AccountWrapper() ; 
            aWraper.name =a.Name ;
            aWraper.label =a.Name ;
            List<Items> co = new List<Items>();
            for(Contact c : a.Contacts){
                Items conWrapp = new Items();
                conWrapp.name =c.Name ;
                conWrapp.label =c.Name ;
                co.add(conWrapp);
            }
            aWraper.items = co;
            aooo.add(aWraper);
            
        }
        return aooo ;
    } 
    public Class AccountWrapper{
        @AuraEnabled
        public String name {get;set;}
        @AuraEnabled
        public String label {get;set;}
        @AuraEnabled
        public List<Items> items {get;set;}
    }
    public Class Items{
        @AuraEnabled
        public String name {get;set;}
        @AuraEnabled
        public String label {get;set;}
        @AuraEnabled
        public List<Items> items {get;set;}
    }
}

2. Create a Lightning web component 

Create a lightning web component using this below SFDX Command

sfdx force:lightning:component:create --type lwc -n TreeGrid -d force-app/main/default/lwc

Here is the code for TreeGrid.html

<template>
    <h4> Tree Grid Example</h4>
    <lightning-tree-grid data={treeItems} columns={columns} key-field="name">
    </lightning-tree-grid>
</template>

Here is the TreeGrid.js JavaScript controller

import {
    LightningElement,
    track,
    api,
    wire
} from 'lwc';
import getTreeGridData from '@salesforce/apex/TreeGrid.getTreeGridData';

export default class TreeGrid extends LightningElement {
    @track columns = [{
            type: 'text',
            fieldName: 'name',
            label: 'name'
        },
        {
            type: 'text',
            fieldName: 'label',
            label: 'label'
        }
    ];
     @track treeItems;
     @track error;
     @wire(getTreeGridData)
     wireTreeData({
         error,
         data
     }) {
         if (data) {
             //  alert(data);
             var res = data;
             var tempjson = JSON.parse(JSON.stringify(data).split('items').join('_children'));
             console.log(tempjson);
             this.treeItems = tempjson;
             console.log(JSON.stringify(tempjson, null, '\t'));
         } else {
             this.error = error;
             //  alert('error' + error);
         }
     }
}

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

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>45.0</apiVersion>
    <isExposed>false</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

3.Push Changes to scratch org 

Now push the changes to scratch org using this SFDX command

sfdx force:source:push

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