Search code examples
tabulator

Add sum below Each Nested Data tree for Tabulator table

I am trying to implement Column sum for a nested table. The docs show it for a simple table here. But, it doesn't work for Nested table.

I have tried including bottomCalc:"sum" in the column definition.

columns: [
{ title: "New Lead", field: "newLeadCount", width: 150, bottomCalc: "sum" },
],

I want to achieve the sum for each Major row group or Posting ID. But currently, it's showing sum at the bottom. And that too it's not able to count because of the incorrect method. I tried this: enter image description here

Solution

  • This can be done using a custom calculator function to sum up the child values, with the caveat of needing to pass the field in as a param.

    This code just nails the approach required https://jsfiddle.net/amwrfzt8/

    This in the html

    <div id="example-table"></div>

    This in the script.

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

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

    Complete discussion over this is available at https://github.com/olifolkerd/tabulator/issues/2235