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

JavaScript Colspan in TreeTable
Programming examples of TreeTable Colspan

JavaScript Colspan in TreeTable

Get a JavaScript programming example for merging cells horizontally in TreeTable. This JavaScript code sample will enable a single table cell to span the width of more than one cell or column within the TreeTable. Feel free to make use of our coding samples or a snippet tool below to create effective web applications.

JS Code

var grida = {
  view:"treetable",
  columns:[
    { id:"id", header:"", css:{"text-align":"right"}, width:50 },
    { id:"value", header:"Film title", fillspace:true, template:"{common.treetable()} #value#" },
    { id:"chapter",	header:"Mode",	width:200 }
  ],
  autoheight:true,
  scroll:false,
  data: [
    { "id":"1", "$row":"value", "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", "$row":"value", "value":"The Godfather", "data":[
      { "id":"2.1", "value":"Part 1", "chapter":"alpha" },
      { "id":"2.2", "value":"Part 2", "chapter":"beta" }
    ]}
  ]
};

webix.ready(function(){
  webix.ui({
    padding:10, rows:[
      {
        template:"<b>Colspan in grid</b>",
        height:40
      },
      grida,
      {}
    ]
  });	
});

How to specify the number of columns a cell should span with Webix TreeTable widget?