lightning-tree-grid with filter in LWC in Salesforce

lightning-tree-grid with filter in LWC in Salesforce

Sample Code:

LWC HTML:

<template>
      
    <lightning-tree-grid columns = {gridColumns}
                            data = {gridData}
                            key-field = "Id"
                            hide-checkbox-column = true
                            onheaderaction = {handleHeaderAction}>
    </lightning-tree-grid>
  
</template>

LWC JavaScript:

import { LightningElement, track, wire } from 'lwc';
import fetchAccounts from '@salesforce/apex/AccountListController.fetchAccounts';

export default class Example extends LightningElement {

    @track gridColumns = [{
        type: 'text',
        fieldName: 'Name',
        label: 'Name'
    },
    {
        type: 'text',
        fieldName: 'Industry',
        label: 'Industry'
    },
    {
        type: 'text',
        fieldName: 'Active__c',
        label: 'Active',
        actions: [
            { label: 'All', checked: true, name: 'All' },
            { label: 'Yes', checked: false, name: 'Yes' },
            { label: 'No', checked: false, name: 'No' }
        ]
    },
    {
        type: 'text',
        fieldName: 'FirstName',
        label: 'FirstName'
    },
    {
        type: 'text',
        fieldName: 'LastName',
        label: 'LastName'
    }];
    @track gridData;
    @track activeFilter = 'All';
    @track allRows;

    @wire(fetchAccounts)
    accountTreeData({ error, data }) {

        if ( data ) {

            var tempData = JSON.parse( JSON.stringify( data ) );
            /*var tempjson = JSON.parse( JSON.stringify( data ).split( 'Contacts' ).join( '_children' ) );
            console.log( 'Temp JSON is ' + tempjson );*/
            for ( var i = 0; i < tempData.length; i++ ) {

                var cons = tempData[ i ][ 'Contacts' ];

                if ( cons ) {

                    tempData[ i ]._children = cons;
                    delete tempData[ i ].Contacts;

                }

            }
            this.gridData = tempData;
            this.allRows = tempData;

        } else if ( error ) {
         
            if ( Array.isArray( error.body ) )
                console.log( 'Error is ' + error.body.map( e => e.message ).join( ', ' ) );
            else if ( typeof error.body.message === 'string' )
                console.log( 'Error is ' + error.body.message );

        }

    }

    handleHeaderAction( event ) {

        const actionName = event.detail.action.name;
        let columns = this.gridColumns;
        const activeFilter = this.activeFilter;
   
        if ( actionName !== activeFilter ) {

            var actions = columns[ 2 ].actions;
            actions.forEach((action) => {
                action.checked = action.name === actionName;
            });
            columns[ 2 ].actions = actions;
            this.activeFilter = actionName;
            this.gridColumns = columns;
            this.updateRows();

        }

    }

    updateRows() {

        const rows = this.allRows;
        let filteredRows = rows;
        const activeFilter = this.activeFilter;

        if (activeFilter !== 'All') {
            filteredRows = rows.filter(function (row) {
                return ( activeFilter === row.Active__c );
            });
        }

        this.gridData = filteredRows;   

    }

}

Apex Class:

public class AccountListController {

    @AuraEnabled(cacheable=true)
    public static List < Account > fetchAccounts() {
        return [ SELECT Id, Name, Industry, Active__c,
                ( SELECT Id, FirstName, LastName FROM Contacts )
                FROM Account LIMIT 100 ];
    }
   

}

Output:

Filter: All

Filter: No

Filter: Yes

Leave a Reply