Data Table Tree Grid - Salesforce LWC

Question

I'm new to this LWC and im trying to get the data be displayed in a data table tree grid where i used a wrapper class together with my Apex Class. i cant seem to find the problem as the data wont show in the table.. im able to see in the console so just putting it in the table is what im trying to do..

Below is my Html

<template>
    <lightning-card title="Skills Tree">
        <lightning-tree-grid
            key-field="Id"
            columns={columns}
            data={skillList}
            hide-checkbox-column
        ></lightning-tree-grid>
    </lightning-card>
  </template>

Javascript

import { LightningElement, wire, track, api } from "lwc";
import getSkillsInventory from "@salesforce/apex/dataTableClass.getSkillsInventory";

export default class DataTableTreeGrid extends LightningElement {
  error;
  @track skillList;
  @track expandedRows = [];
  @track wiredskillListData;
  @track contactId;
  @api recordId;

  @wire(getSkillsInventory, { contactId: "$recordId" })
    wiredskillListData(result) { 
      
      if(result.data){
        console.log('this is data')
        console.log(result.data)
        this.skillList = result.data;
      }else if(result.error){
        console.log('error # ' + result.error);
      }
    } 

  
  constructor() {
    super();
    this.columns = [
      {
        type: "text",
        fieldName: "skillName",
        label: "Skills Name",
        _children: [
          {
            type: "text",
            fieldName: "subskills",
          }
        ],
      },
      {
        type: "text",
        fieldName: "skillProficiency",
        //fieldName: "Name",
        label: "Proficiency"
      },

      { 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);
  }
}

WRAPPER CLASS;

public class SkillMatrixWrapper {
    @AuraEnabled
    public List<SkillL1> skillInfoList {get;set;}
    
    public class SkillDetails{
        @AuraEnabled
        public String skillName         {get;set;}

        @AuraEnabled
        public String skillProficiency  {get;set;}
    }
            
    public class SkillL3{
        @AuraEnabled
        public SkillDetails skillInfo {get;set;}
    }
    
    public class SkillL2{
        @AuraEnabled
        public SkillDetails skillInfo {get;set;}

        @AuraEnabled
        public List<SkillL3> subskills {get;set;}
    }
    
    public class SkillL1{
        @AuraEnabled
        public SkillDetails skillInfo {get;set;}

        @AuraEnabled
        public List<SkillL2> subskills {get;set;}
           
        public SkillL1(SkillDetails skillInfoDetails){
            skillInfo = skillInfoDetails;
            subskills = new List<SkillL2>{};
        }
        
    }
    
    
}

Data Table Tree Grid - Salesforce LWC

0 Answers0