data

JavaScript array containing data for the component

string|array|object data;

Example

var 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"}
            ]
        }
     }
];
 
webix.ui({
    view:"treetable",
    data:data,
    columns:[
        { id:"id", header:""},
        { id:"value", header:"Film title",
                        template:"{common.treetable()} #value#" },
        { id:"chapter", header:"Mode",  width:200}
    ]
});

Related samples

Details

The data property serves only as an initial data source. After the data has been parsed, it will be kept in the inner storage for loaded data.

The source array will be modified during data parsing. To reuse the original data array, make a copy of it and continue with the copied array.

After the data is parsed, each data item will be supplied with the following properties to form the hierarchy:

  • $level - (number) the level of nesting (one-based numbering);
  • parent - (string) the id of thr item parent;
  • $count - (number) the number of children
See also
Back to top
If you have not checked yet, be sure to visit site of our main product Webix ui widget library and page of tree table widget product.