Have a look at the JavaScript code sample of TreeTable. TreeTable is an indispensable widget when it comes to logical and convenient information organization. In this programming example, you can observe basic data initialization within a tree structure. Feel free to use our piece of code or a snippet tool below for creating your own web apps.
webix.ui({
view:"treetable",
columns:[
{ id:"id", header:"", css:{"text-align":"right"}, width:50},
{ id:"value", header:"Film title", width:250,
template:"{common.treetable()} #value#" },
{ id:"chapter", header:"Mode", width:200}
],
autoheight:true,
autowidth:true,
data: [
{ "id":"1", "value":"The Shawshank Redemption", "open":true, "data":[
{ "id":"1.1", "value":"Part 1", "chapter":"alpha"},
{ "id":"1.2", "value":"Part 2", "chapter":"beta", "open":true, "data":[
{ "id":"1.2.1", "value":"Part 1", "chapter":"beta-twin"},
{ "id":"1.2.2", "value":"Part 1", "chapter":"beta-twin"}
]},
{ "id":"1.3", "value":"Part 3", "chapter":"gamma" }
]},
{ "id":"2", "value":"The Godfather", "data":[
{ "id":"2.1", "value":"Part 1", "chapter":"alpha" },
{ "id":"2.2", "value":"Part 2", "chapter":"beta" }
]}
]
});