Lightning Tree Grid With Input Search Functionality

Lightning Tree Grid displays hierarchical data in a table. The component is really cool in terms of feature. Now think of a situation where you have thousands of record to display on the screen using lightning tree grid. The lightning page will hang as an result. Now, you are advised to implement either pagination or add a search functionality on top of it.

Wireframe – Search In Lightning Tree grid

We are going to have an search input above the lightning tree grid which filters the tree grid based on input of user in real time.

Code – Search In Lightning Tree Grid

Let’s create a Lightning Web Component named TreeGridWithSearch and an apex controller called accountController.

treeGridWithSearch.html

The html file of the component have lightning card which holds tree grid and lightning input as a body.

<template>
    <lightning-card title="Search In Tree Grid" icon-name="custom:custom57">
        <div class="slds-var-m-around_medium">
            <lightning-input type="search" onchange={handleKeyChange}
                class="slds-show slds-is-relative slds-var-m-bottom_small" label="Search">
            </lightning-input>
            <lightning-tree-grid columns={gridColumns} data={gridData} key-field="Id">
            </lightning-tree-grid>
        </div>
    </lightning-card>
</template>

treeGridWithSearch.js

The js file of the component have imported the apex controller and have the search input handler that invokes the apex method.

import { LightningElement } from 'lwc';
import fetchAccountAndRelatedContacts from '@salesforce/apex/accountController.fetchAccountAndRelatedContacts';
const DELAY = 350;
export default class TreeGridWithSearch extends LightningElement {
    gridData;

    gridColumns = [
        {
            type: 'text',
            fieldName: 'Name',
            label: 'Name'
        },
        {
            type: 'text',
            fieldName: 'Phone',
            label: 'Phone'
        },
        {
            type: 'text',
            fieldName: 'AccountNumber',
            label: 'Account Number'
        },
        {
            type: 'text',
            fieldName: 'FirstName',
            label: 'First Name'
        },
        {
            type: 'text',
            fieldName: 'LastName',
            label: 'Last Name'

        }
    ];

    handleKeyChange(event) {
        // Debouncing this method: Do not actually invoke the Apex call as long as this function is
        // being called within a delay of DELAY. This is to avoid a very large number of Apex method calls.
        window.clearTimeout(this.delayTimeout);
        const searchKey = event.target.value;
        // eslint-disable-next-line @lwc/lwc/no-async-operation
        this.delayTimeout = setTimeout(() => {
            fetchAccountAndRelatedContacts({ searchKey: searchKey }).then((result) => {
                let data = JSON.parse(JSON.stringify(result));
                for (let i = 0; i < data.length; i++) {
                    data[i]._children = data[i]['Contacts'];
                    delete data[i]['Contacts'];
                }
                this.gridData = data;
            }).catch((error) => {
                console.log(error);
                this.gridData = undefined;
            });
        }, DELAY);
    }
}

treeGridWithSearch.js-meta.xml

The xml file exposes the component to the lightning pages and defines the other metadata information of the component.

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