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

/*
  In the upper treetable data is loaded initially. 
  In the lower table the first level is loaded initially and 
  its child elements are loaded upon opening the parent branch.
*/

webix.ui({
  view: "scrollview",
  scroll: "y",
  body: {
    rows:[
      { template:"<br><b>Static</b>", height:54 }, 
      {
        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:"<br><b>Dynamic</b>", height:54 }, 

      {
        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?