[SOLVED] How can I add a <table> to a child node when is lazyloaded in fancytree?

How can I add a <table> to a child node when is lazyloaded in fancytree?

Ive just started using fancytree this week, I'd like to add a table when a node is lazy loaded,the data for the that table will be the output of a GET request and I have the code to generate the table as I want it with jquery but when its time to add it to data.result I have no clue how to do it, it is expecting a list of children and the output for my function will be the table as it is in the snippet

I've tried many and most likely stupid things and I cant find any help in the examples, please help!

const SOURCEDATA = [
  {
  "title": "group1", 
  expanded: true, 
  children: [
    {
     "title": "Users", 
     expanded: true, 
     children: [
      {"title": "User1", "lazy": true}, 
      {"title": "User2", "lazy": true},
      {"title": "User3", "lazy": true}
      ]
     }]
   },
   {
  "title": "group2", 
  children: [
    {
     "title": "Users", 
     expanded: true, 
     children: [
      {"title": "User4", "lazy": true}, 
      {"title": "User5", "lazy": true},
      {"title": "User6", "lazy": true}
      ]
     }]
   }
   ]

$(function() {
  $("#tree").fancytree({
  source: SOURCEDATA,
  focusOnSelect: true,
  activeVisible: true,
  lazyLoad: function(event, data){
    var node = data.node
    data.result = [{"title":"this should be the place for the table"}]
     }
  });
});

<link href="//cdn.jsdelivr.net/npm/jquery.fancytree@2.25/dist/skin-win8/ui.fancytree.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/jquery.fancytree@2.27/dist/jquery.fancytree-all.min.js"></script>
    
<div id="tree">my tree</div>
<table id="user_2">
  <thead>
    <tr>
      <th>Process Name</th>
      <th>Process Hashes</th> 
      <th>Process Author</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <select id="process_name">
          <option>Foo.exe</option>
          <option></option>
        </select>
      </td>
      <td>
        <select id="process_hash">
          <option></option>
          <option value="0123ABC">0123ABC</option>
          <option value="ABC0123">ABC0123</option>
        </select>
      </td>
      <td>
        <select id="process_author">
          <option></option>
          <option value="Someone">Someone</option>
          <option value="Somebody">Somebody</option>
        </select>
      </td>
      <td>
        <input id="act_allow" type="radio" name="action" value="allow">Allow</input>
        <input id="act_deny" type="radio" name="action" value="deny">Deny</input>
        <input id="act_warn" type="radio" name="action" value="warn">Warn</input>
      </td>
    </tr>
  </tbody>
</table>

Solution

As long as the escapeTitles option is not enabled, you should be able to add raw HTML markup as a title.

Did you try

  lazyLoad: function(event, data){
    var node = data.node
    data.result = [{title: "<table>...</table>", icon: false}]
     }
  });

Not sure however how good this will play with styling and event handling of the standard tree.