How to add Grand total in Tabulator.js table

Question

I have created a tabulator table like this (refer this fiddle )

var nestedCalc = function(values, data, calcParams){
    var calc = 0;

    data.forEach(function(row) {
        row._children.forEach(function (child) {
        calc += child[calcParams.field];
      })
    });

    return calc;
}

var table = new Tabulator("#example-table", {
    data:tableDataNested,
    dataTree:true,
    dataTreeStartExpanded:true,
    groupBy: "name",
    columns:[
      {title:"Name", field:"name", responsive:0},
      {title:"Applied", field:"applied", bottomCalc: nestedCalc, align:"center", bottomCalcParams: {field: "applied"}},
      {title:"Screened", field:"screened", bottomCalc: nestedCalc,align:"center", bottomCalcParams: {field: "screened"}},
      {title:"Interviewed", field:"interviewed", bottomCalc: nestedCalc,align:"center", bottomCalcParams: {field: "interviewed"}},
    ],
});

With some dummy data like this

var tableDataNested = [
    {name:"Backend Engineer A", _children:[
        {name:"Sourced", applied:300, screened:40, interviewed:5},
        {name:"Referred", applied:3, screened:1, interviewed:0},
        {name:"University", applied:4, screened:2, interviewed:1},
        {name:"Total", applied:307, screened:43, interviewed:6},
    ]},
    {name:"Backend Engineer B", _children:[
        {name:"Sourced", applied:1000, screened:140, interviewed:55},
        {name:"Referred", applied:30, screened:11, interviewed:2},
        {name:"University", applied:40, screened:22, interviewed:10},
    ]},
    {name:"Backend Engineer B", _children:[
        {name:"Sourced", applied:1000, screened:140, interviewed:55},
        {name:"Referred", applied:30, screened:11, interviewed:2},
        {name:"University", applied:40, screened:22, interviewed:10},
    ]},
];

I want to add a Grand Total as highlighted in the image below

I am finding this utterly difficult as I couldn't get anything helpful in the documentation. Help & hints are appreciated.

Answer 1

You can do this by setting the columnCalcs to both in your table constructor

var table = new Tabulator("#example-table", {
    columnCalcs:"both", //show column calculations at top and bottom of table and in groups
});

Answer 2

In Tabulator you can do it like this :

    var table = new Tabulator("#example-table", {
    columnCalcs:"table", //show column calculations at top and bottom of table and in groups
});

The columnCalcs option lets you decided where the calculations should be displayed, it can take one of four values:

• true - show calcs at top and bottom of the table,
• both - show calcs at top and bottom of the table and show in groups
• table - show calcs at top and bottom of the table only
• group -show calcs in groups only

Reference : http://tabulator.info/docs/4.5/column-calcs