Tree Grid in Lightning Web Component Salesforce | LWC Stack ☁️⚡️

Kapil December 04, 2021


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 :)
Tags:

Post a Comment

2 Comments

  1. AnkithDecember 4, 2021 at 7:00 AM

    expandedRows property is not assigned with any data. What is use case of expandedRows property. What data it will return from the get method

    ReplyDelete
    Replies
    1. KapilDecember 7, 2021 at 10:34 AM

      Hey there, I am using that function in some other example of the tree grid to get all the expanded rows at once.

      Delete