Fancy tree: making a table tree

I have started using the fancy tree js library but have found a problem in using tree tables:

$("#treetable").fancytree({
   extensions: ["table"],
   checkbox: true,
   table: {
     indentation:20,
     nodeColumnIdx: 1,
     checkboxColumnIdx: 0
   },
   source : {
     url: 'data.json'
   },
   renderColumns: function(event, data) {
     ....
  });

My current fancy tree looks something simple like this:

<div id="tree">
    <ul id="treeData" style="display: none;">
      <li id="id1" title="Look, a tool tip!">item1 with key and tooltip
      <li id="id2">item2
      <li id="id3" class="folder">Folder <em>with some</em> children
        <ul>
          <li id="id3.1">Sub-item 3.1
            <ul>
              <li id="id3.1.1">Sub-item 3.1.1
              <li id="id3.1.2">Sub-item 3.1.2
            </ul>
          <li id="id3.2">Sub-item 3.2
            <ul>
              <li id="id3.2.1">Sub-item 3.2.1
              <li id="id3.2.2">Sub-item 3.2.2
            </ul>
        </ul>
      <li id="id4" class="expanded">Document with some children (expanded on init)
        <ul>
          <li id="id4.1"  class="active focused">Sub-item 4.1 (active and focus on init)
            <ul>
              <li id="id4.1.1">Sub-item 4.1.1
              <li id="id4.1.2">Sub-item 4.1.2
            </ul>
          <li id="id4.2">Sub-item 4.2
            <ul>
              <li id="id4.2.1">Sub-item 4.2.1
              <li id="id4.2.2">Sub-item 4.2.2
            </ul>
        </ul>
    </ul>
  </div>

I need to use the tree table in order to have a column to show a certain numeric value next to each tree node and leaves. So what I am wondering is if there is a way to use the normal tree way with <ul> <li></li> ...<li></li> </ul> to fill the tree table rather than necessarily filling the source attribute with a json or php file.

I would really appreciate it if someone could enlighten me on this.