NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

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?