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

Question

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>

Answer 1

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.