title: Data Table Tree Grid - Salesforce LWC
body: <p>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..</p>
  <p>Below is my Html</p>
  <pre><code>&lt;template&gt;
      &lt;lightning-card title=&quot;Skills Tree&quot;&gt;
          &lt;lightning-tree-grid
              key-field=&quot;Id&quot;
              columns={columns}
              data={skillList}
              hide-checkbox-column
          &gt;&lt;/lightning-tree-grid&gt;
      &lt;/lightning-card&gt;
    &lt;/template&gt;
  </code></pre>
  <p>Javascript</p>
  <pre><code>import { LightningElement, wire, track, api } from &quot;lwc&quot;;
  import getSkillsInventory from &quot;@salesforce/apex/dataTableClass.getSkillsInventory&quot;;
  
  export default class DataTableTreeGrid extends LightningElement {
    error;
    @track skillList;
    @track expandedRows = [];
    @track wiredskillListData;
    @track contactId;
    @api recordId;
  
    @wire(getSkillsInventory, { contactId: &quot;$recordId&quot; })
      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: &quot;text&quot;,
          fieldName: &quot;skillName&quot;,
          label: &quot;Skills Name&quot;,
          _children: [
            {
              type: &quot;text&quot;,
              fieldName: &quot;subskills&quot;,
            }
          ],
        },
        {
          type: &quot;text&quot;,
          fieldName: &quot;skillProficiency&quot;,
          //fieldName: &quot;Name&quot;,
          label: &quot;Proficiency&quot;
        },
  
        { type: &quot;action&quot;, typeAttributes: { rowActions: this.getRowActions } }
      ];
    }
  
    get expandedRowItems() {
      return this.expandedRows;
    }
    getRowActions(row, doneCallback) {
      const actions = [];
      actions.push({
        label: &quot;Edit&quot;,
        name: &quot;edit&quot;
      });
      actions.push({
        label: &quot;Delete&quot;,
        name: &quot;delete&quot;
      });
      doneCallback(actions);
    }
  }
  </code></pre>
  <p>WRAPPER CLASS;</p>
  <pre><code>public class SkillMatrixWrapper {
      @AuraEnabled
      public List&lt;SkillL1&gt; 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&lt;SkillL3&gt; subskills {get;set;}
      }
      
      public class SkillL1{
          @AuraEnabled
          public SkillDetails skillInfo {get;set;}
  
          @AuraEnabled
          public List&lt;SkillL2&gt; subskills {get;set;}
             
          public SkillL1(SkillDetails skillInfoDetails){
              skillInfo = skillInfoDetails;
              subskills = new List&lt;SkillL2&gt;{};
          }
          
      }
      
      
  }
  </code></pre>