I am trying to create custom tree grid component because of some limitation of standard salesforce lightning-tree-grid. The requirement is based on the data custom tree should automatically generate dynamically.

Below is the component structure .

Parent component html

    <table  class="slds-tree">
            <template for:each={datas} for:item="dataEach">
                <c-child key={dataEach.Id} curr-data={dataEach} aria-level={dataEach.level}></c-child>

Parent Component JS

import {LightningElement, track} from 'lwc';

export default class SampleLwcComponent extends LightningElement {
@track datas = [];

   let data = [
        { Name:'st1', Id:1, age:'2', num:'342222222', Email:'[email protected]' },
        { Name:'st1', age:'2', Id:2, num:'342222222', Email:'[email protected]', childrens:[
            { Name:'st1child', Id:6, age:'2', num:'342222222', Email:'[email protected]' },
            { Name:'st1child', Id:7, age:'2', num:'342222222', Email:'[email protected]' }, ]
        { Name:'st1', age:'2', Id:3, num:'342222222', Email:'[email protected]' },
        { Name:'st1', age:'2', Id:4, num:'342222222', Email:'[email protected]' },
        { Name:'st1', age:'2', Id:5, num:'342222222', Email:'[email protected]' },
    const isExpandedDefault = false;
    const flatIt = (data, level) => data.reduce((acc, row) => [...acc, Object.assign(row, {
        expanded: isExpandedDefault,
    }), ...flatIt(row.children || [], level + 1)], []);
    this.datas = flatIt(data, 1);        

Child Html

  <template for:each={currData.childrens} for:item="childData">
      <c-child key={childData.Id} curr-data={childData} aria-level={childData.level}></c-child>

Child Component JS

import { LightningElement,track,api } from 'lwc';

export default class Child extends LightningElement {
@track _data;

set currData(value){
    this._data = value;
    this.ariaExpanded = false;
    this.ariaLevel = value.level;

get currData(){
    return this._data;

I took a reference of of previous similar post but seems like i am missing something which leads incorrect tree grid generation , adding the screenshot below.

enter image description here

Any idea on how to resolve it would be appreciated. Thanks in advance.


You must log in to answer this question.

Browse other questions tagged .