Static and Dynamic Loading in TreeTable
Programming Example of TreeTable Static and Dynamic Loading

TreeTable Static and Dynamic Loading JavaScript code

You can choose the way data is displayed in a TreeTable. When a TreeTable loads statically, a column width adapts to the text width. Dynamic loading allows you to change the column width. Feel free to use our code samples below.

JS Code

webix.ui({
  padding:13,
  rows:[
    { template:"Static", height:30 }, 
    {
      view:"treetable",
      columns:[
        { id:"id",	header:"", css:{"text-align":"right"},  	width:50},
        { id:"value",	header:"Title",	width:250,
         template:"{common.treetable()} #value#" },
        { id:"state",	header:"State",	width:100},
        { id:"hours",	header:"Hours",	width:100}
      ],
      autoheight:true,
      autowidth:true,    
      url: "https://docs.webix.com/samples/server/projects"
    },    

    { template:"Dynamic", height:30 }, 

    {
      view:"treetable",
      columns:[
        { id:"id",	header:"", css:{"text-align":"right"}, 	width:50},
        { id:"value",	header:"Film title", width:250,
         template:"{common.treetable()} #value#" },
        { id:"state",	header:"State"},
        { id:"hours",	header:"Hours"}
      ],
      autoheight:true,
      autowidth:true,    
      url: "https://docs.webix.com/samples/server/projects_dynamic"
    }
  ]
});

How to ensure static and dynamic loading with the Webix TreeTable widget?