In this blog I will share the build for Tree Grid in Lightning Web Component. Please check the official documentation below :
https://www.lightningdesignsystem.com/components/tree-grid/#site-main-content
HTML
1 2 3 4 5 6 7 | <template>
<lightning-tree-grid
columns={columns}
data={accounts}
key-field="Id"
></lightning-tree-grid>
</template>
|
JS
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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | import { LightningElement, wire, track } from "lwc";
import getAccountList from "@salesforce/apex/AccountController.getAccWithCon";
export default class TreeGrid extends LightningElement {
accounts;
error;
@track expandedRows = [];
@wire(getAccountList)
wiredAccounts({ error, data }) {
if (data) {
let parseData = JSON.parse(JSON.stringify(data));
for (let i = 0; i < parseData.length; i++) {
parseData[i]._children = parseData[i]["Contacts"];
}
this.accounts = parseData;
} else if (error) {
this.error = error;
this.accounts = undefined;
}
}
constructor() {
super();
this.columns = [
{
type: "text",
fieldName: "Name",
label: "Name"
},
{
type: "text",
fieldName: "Rating",
label: "Rating"
},
{
type: "text",
fieldName: "Phone",
label: "Phone"
},
{
type: "text",
fieldName: "FirstName",
label: "First Name"
},
{
type: "text",
fieldName: "LastName",
label: "Last Name"
},
{ type: "action", typeAttributes: { rowActions: this.getRowActions } }
];
}
get expandedRowItems() {
return this.expandedRows;
}
getRowActions(row, doneCallback) {
const actions = [];
actions.push({
label: "Edit",
name: "edit"
});
actions.push({
label: "Delete",
name: "delete"
});
doneCallback(actions);
}
}
|
APEX
1 2 3 4 5 6 7 | public with sharing class AccountController{
@AuraEnabled(Cacheable=true)
public static list<Account> getAccWithCon(){
return [SELECT Id, Name, Phone, Rating, (SELECT Id, FirstName, LastName FROM Contacts) FROM Account];
}
}
|
Output
Checkout complete video tutorial below
If you have any question please leave a comment below.
If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !
Thanks
Happy Coding :)
2 Comments
expandedRows property is not assigned with any data. What is use case of expandedRows property. What data it will return from the get method
ReplyDeleteHey there, I am using that function in some other example of the tree grid to get all the expanded rows at once.
Delete