Export to PDF, Excel in TreeTable,
coding samples of export to PDF and Excel in TreeTable

JavaScript export to PDF, Excel in TreeTable

Get a JavaScript coding sample of export to PDF and Excel in TreeTable. By means of our JS coding sample you'll be able to export information from TreeTable to PDF and Excel. Feel free to use our programming samples or a snippet tool below to enhance your JavaScript skills, and make your own web applications. footer: How to make effective math calculations with Webix TreeTable widget?

JS Code

var options = { 
  flatTree:{
    id:"value",
    columns:[
      { header:"Title" },
      { header:"Section" },
      { header:"Subsection" },
    ]
  }
};

var options2 = { 
  flatTree:{
    id:"value",
    fill:true,
    columns:[
      { header:"Title" },
      { header:"Section" },
      { header:"Subsection" },
    ]
  }
};

var grida = {
  view:"treetable",
  id:"grida",
  columns:[
    { id:"id", header:"", css:{"text-align":"right"}, width:50},
    { id:"value", header:"Film title", fillspace:true,
     template:"{common.treetable()} #value#", exportAsTree:true },
    { id:"chapter",	header:"Mode", width:200}
  ],
  select:"row",
  autoheight:true,
  scroll:false,

  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"}
      ]},
      { "id":"1.3", "value":"Part 3", "chapter":"gamma" }
    ]},
    { "id":"2", "value":"The Godfather", "data":[
      { "id":"2.1", "value":"Part 1", "chapter":"alpha" },
      { "id":"2.2", "value":"Part 2", "chapter":"beta" }
    ]}
  ]
};

var buttons = {
  margin:10, cols:[
    {
      margin:10, rows:[
        { view:"button", width:110, value:"Get PDF", click:function(){webix.toPDF($$("grida"));} },
        { view:"button", width:110, value:"Get Excel", click:function(){webix.toExcel($$("grida"));} },
        { view:"button", width:110, value:"Get CSV", click:function(){webix.toCSV($$("grida"));} }
      ]
    },
    {
      margin:10, rows:[
        { view:"button", width:110, value:"Get flat PDF", click:function(){webix.toPDF($$("grida"),options);} },
        { view:"button", width:115, value:"Get flat Excel", click:function(){webix.toExcel($$("grida"),options);} },
        { view:"button", width:110, value:"Get flat CSV", click:function(){webix.toCSV($$("grida"),options);} }
      ]
    },
    {
      margin:10, rows:[
        { view:"button", width:110, value:"Get fill PDF", click:function(){webix.toPDF($$("grida"),options2);} },
        { view:"button", width:110, value:"Get fill Excel", click:function(){webix.toExcel($$("grida"),options);} },
        { view:"button", width:110, value:"Get fill CSV", click:function(){webix.toCSV($$("grida"),options2);} }
      ]
    }
  ]
};

webix.ready(function(){
  webix.ui({
    view: "scrollview",
    scroll: "y",
    body: {
      rows:[
        buttons,
        grida,
        {}
      ]
    }
  });
});		
test