Programming examples of TreeTable calculations

TreeTable math JavaScript code

Get a JavaScript programming example for math calculations in TreeTable. TreeTable is a powerful web widget which combines Table and Tree functions for data organization and presentation. With the help of our JS code sample, you'll be able to make math calculations right inside the TreeTable cells. Feel free to use our code samples or a snippet tool below to practice your JavaScript skills, and create custom business applications.

JS Code

var grid = {
  view:"treetable",
  columns:[
    { id:"id", header:"", width:50},
    { id:"name", header:"Country", template:"{common.treetable()} #name#", width:200 },
    { id:"rev", header:"Revenue" , width:100},
    { id:"exp", header:"Expenditures", width:100},
    { id:"dif", header:"Deficit/surplus", width:100},
    { id:"dif", header:"By column", math:"[$r,:2] - [$r,:3]", width:100}
  ],
  autoheight:true,
  math: true,
  ready:function(){ this.openAll(); },
  data: budget_tree
};

webix.ready(function(){

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

});

HTML Code

<script>
var budget_tree = [
  { name:"Top Group", data:[
  { id:1, name:"United States",	rev: "2092000", exp: "3397000", dif:"=2092000 - 3397000", dif_math:"=[:0,:2]-[:0,:3]", date: "2010"},
  { id:2, name:"Japan", rev: "1839000", exp: "2252000", dif:"=1839000 - 2252000", dif_math:"=[:1,:2] - [:1,:3]", date: "2009"},
  { id:3, name:"Germany", rev: "1398000", exp: "1540000", dif:"=1398000 - 1540000", dif_math:"=[:2,:2] - [:2,:3]", date: "2009"},
  { id:4, name:"France ", rev: "1229000", exp: "1445000", dif:"=1229000 - 1445000", dif_math:"=[:3,:2] - [:3,:3]", date: "2009"},
  { id:5, name:"China", rev: "1149000", exp: "1270000", dif:"=1149000 - 1270000", dif_math:"=[:4,:2] - [:4,:3]", date: "2009"}
  ]},
  { name:"Other", data:[
  { id:6, name:"Italy", rev: "960100", exp: "1068000", dif:"=960100 - 1068000", dif_math:"=[:5,:2] - [:5,:3]", date: "2009"},
  { id:7, name:"United Kingdom", rev: "926700", exp: "1154000", dif:"=926700 - 1154000", dif_math:"=[:6,:2] - [:6,:3]", date: "2009"},
  { id:8, name:"Canada", rev: "605700", exp: "677700", dif:"=605700 - 677700", dif_math:"=[:7,:2] - [:7,:3]", date: "2009"},
  { id:9, name:"Spain", rev: "503100", exp: "633300", dif:"=503100 - 633300", dif_math:"=[:8,:2] - [:8,:3]", date: "2009"},
  { id:10, name:"Brazil", rev: "464400", exp: "552600", dif:"=464400 - 552600", dif_math:"=[:9,:2] - [:9,:3]", date: "2009"}
  ]}
];
</script>
test

How to make effective math calculations with Webix TreeTable widget?