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
|
1 |
sfdx force:apex:class:create -n TreeGrid -d force-app/main/default/apex |
Use this apex code in the TreeGrid Class
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
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
|
1 |
sfdx force:lightning:component:create --type lwc -n TreeGrid -d force-app/main/default/lwc |
Here is the code for TreeGrid.html
|
1 2 3 4 5 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
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
|
1 2 3 4 5 6 7 8 |
<?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
|
1 |
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
