Tree table dynamic data population in Angular 6

Tree table is not populating correctly. It shows an empty grid.
I am unable to get whats wrong with my data.

Here is my code.

// Json Object

let dataSet1 =  {
"value": "project717711",
"data": [{
"value": "",
"data": [{
    "user": "29435226-e551-453d-8e6c-91513312921f"
},
{
  "other": ""
},
{
  "var1": ""
},
{
  "type": ""
},
{
  "category": ""
},
{
  "keywords": ""
},
{
  "sysState": ""
},

{
  "editedBy": ""
},
{
  "id": "90469b75-2d8c-4ecd-a932-a9db1c353b2e"
    }]
 }]
};

webix.ui({
    container: "webixtreetable",
    view: "treetable",
    id: "treetable",
    editable: true,
    columns: [
        { id: "checkbox", header: { content: "masterCheckbox", contentId: 
          "cm1" }, template: "{common.checkbox()}" },
        { id: "value", header: "Product Id", width: 250, template: " 
          {common.treetable()} #value#" },
        { id: "lineItem", header: "Line" },
        { id: "level", header: "level" },
        { id: "part", header: "PART ID", width: 200 },
        { id: "var3", header: "MANUFACTURER", width: 200 },
        { id: "var4", header: "DESCRIPTION", width: 400 },
        { id: "var7", header: "QTY", width: 100 },
        { id: "test", header: "TEST1", editor: "text", width: 100 },
        { id: "letter", header: "letter", editor: "select", width: 100, options: ["", 
          "Yes", "No"] },
        { id: "status", header: "Status", width: 200 }
    ],
    drag: true,
    data: dataSet1
});

Hello,

There are several features which should be explained:

1) By default, the similar structure is used for providing additional options (spans, for example - please check the code sample) for the datatable.
Thus, only data array will be parsed to the datatable as actual data from the following format:

{
   foo:value1,
   foo2:value2,
   data:[ ... ]
}

Still, it is just a default behaviour which can be changed via custom data driver.

2) Datatable/treetable considers the objects in data array as rows. Fields in these objects are considered as cells.

Each column intends to render the data fields which key corresponds to the column ID:

  • value is intended to be rendered in a column with id:"value",
  • var1 is intended to be rendered in a column with id:"var1",
    and so on.

As far as I can see, only value appears in both column config and data item.


In order to provide a suitable solution, could you please clarify the desired result, i.e. how the data should be rendered in your table?