0

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

<template>
<lightning-card>
    <table  class="slds-tree">
        <thead>
            <th>Name</th>
            <th>Age</th>
            <th>Num</th>
            <th>Email</th>
        </thead>
        <tbody>
            <template for:each={datas} for:item="dataEach">
                <c-child key={dataEach.Id} curr-data={dataEach} aria-level={dataEach.level}></c-child>
            </template>
        </tbody>
    </table>
</lightning-card>

Parent Component JS

import {LightningElement, track} from 'lwc';

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

connectedCallback(){
   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, {
        level,
        expanded: isExpandedDefault,
    }), ...flatIt(row.children || [], level + 1)], []);
    this.datas = flatIt(data, 1);        
}
}

Child Html

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

Child Component JS

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

export default class Child extends LightningElement {
@track _data;

@api
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.

0

You must log in to answer this question.

Browse other questions tagged .