Format number when using Calculation Functions tabulator

Question

Hi I am trying add some number format when sum column value in tabulator (format number for sum function in footer).

And this is what i try so far.

$(document).ready(function() {

  function formatNumber(num) {
    var str = num.toString().split('.');
    if (str[0].length >= 5) {
      str[0] = str[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
    }
    if (str[1] && str[1].length >= 4) {
      str[1] = str[1].replace(/(\d{3})/g, '$1 ');
    }
    return str.join('.');
  }

  function getSum(total, num) {
    return total + num;
  }

  var adultCalc = function(values, data, calcParams) {
    var totalcount = 0;
    var count = 0;

    data.forEach(function(data) {
      count = data.price * data.qty;
      totalcount += count;
    });

    return formatNumber(totalcount);
  }


  var tabledata = [{
      id: 1,
      name: "Item A",
      price: "1000",
      qty: "2000"
    },
    {
      id: 3,
      name: "Item B",
      price: "8500",
      qty: "1500"
    },
    {
      id: 4,
      name: "Item C",
      price: "9100",
      qty: "2500"
    },
    {
      id: 5,
      name: "Item D",
      price: "950",
      qty: "1100"
    },
    {
      id: 5,
      name: "Item E",
      price: "2000",
      qty: "750"
    },
    {
      id: 4,
      name: "Item F",
      price: "2500",
      qty: "1000"
    }
  ];

  var table = new Tabulator("#example-table", {
    height: 205,
    data: tabledata,
    layout: "fitColumns",
    columns: [{
        title: "Name",
        field: "name",
        width: 150
      },
      {
        title: "Price",
        field: "price",
        bottomCalc: adultCalc
      },
      {
        title: "Qty",
        field: "qty",
        bottomCalc: "sum"
      }
    ]
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>

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

The problem is, how to call the function for seperate the total value like my price column?

My price column is Custom Calculation Function from tabulator so i'm possible to call formatNumber function.

But the qty column is built in function.

Is it possible to call formatNumber function in built-in function from tabulator?

Or any idea for solve this problem?

You can check in jsfiddle too

Actually Happen is: qty total 8850

Expected result : 8,850 like my price total, seperate by comma.

Answer 1

The issue you are having is because you are storing the numeric values in your data as strings, if you take them out of quotation marks the maths will work correctly:

{
    id: 5,
    name: "Item E",
    price: "2000",
    qty: "750"
},

should be

{
    id: 5,
    name: "Item E",
    price: 2000,
    qty: 750
},