Dynamic Cell formatting

I would like to dynamically format the style of the money sum cells, for the row cells and the built-in calculation column cells.

For example, change the money symbol, decimal symbol, thousand separator symbol to the cells.

The code below formats a row cell in money type to show partial cost including money symbol, thousand and decimals symbols, and precision. Also the same is applied to the bottom calculation cell.

{
  "title": "Partial",
  "field": "Partial",
  "width": 150,
  "align": "right",
  "formatter": "money",
  "formatterParams": {
    "decimal": ",",
    "thousand": ".",
    "symbol": "USD ",
    "symbolAfter": false,
    "precision": 2
  },
  "bottomCalc": "sum",
  "bottomCalcFormatter": "money",
  "bottomCalcFormatterParams": {
    "decimal": ",",
    "thousand": ".",
    "symbol": "USD ",
    "symbolAfter": false,
    "precision": 2
  }
}

The piece of code works fine, but I do not get the documentation to precisely change the money symbol, decimal and thousand separator, and precision parameters.

I would like to change these parameters dynamically by having the user to change their own parameters in the form.

Solution

If you want to have dynamic currency you should set it on Tabulator Constructor everytime I would suggest

but If you still want to change it on Run time you can use Javascript to do that see my code below

    <!DOCTYPE html>
<html lang="en">

  <head>
    <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
  </head>

  <body>
    <div id="example-table"></div>
    <button id='changeCurrency'>
Change $ to £
</button>

    <script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>

    <script>
      const tabledata = [{
      id: 1,
      name: "Oli Bob",
      money: "12",
      col: "red",
      dob: ""
    },
    {
      id: 2,
      name: "Mary May",
      money: "1",
      col: "blue",
      dob: "14/05/1982"
    },
    {
      id: 3,
      name: "Christine Lobowski",
      money: "42",
      col: "green",
      dob: "22/05/1982"
    },
    {
      id: 4,
      name: "Brendon Philips",
      money: "125",
      col: "orange",
      dob: "01/08/1980"
    },
    {
      id: 5,
      name: "Margret Marmajuke",
      money: "16",
      col: "yellow",
      dob: "31/01/1999"
    },
  ];

  const table = new Tabulator("#example-table", {
    height: 205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
    data: tabledata, //assign data to table
    layout: "fitColumns", //fit columns to width of table (optional)
    columns: [ //Define Table Columns
      {
        title: "Name",
        field: "name",
        width: 150
      },
      {
        title: "money",
        field: "money",
        align: "left",
        formatter: "money",
        bottomCalc: "sum",
        bottomCalcParams: {
          precision: 3
        },
        bottomCalcFormatter: "money",
        bottomCalcFormatterParams: {
          decimal: ".",
          thousand: ",",
          symbol: "$"
        },
        formatterParams: {
          decimal: ".",
          thousand: ",",
          symbol: "$"
        }
      },
      {
        title: "Favourite Color",
        field: "col"
      },
      {
        title: "Date Of Birth",
        field: "dob",
        sorter: "date",
        align: "center"
      },
    ]
  });



  $("#changeCurrency").click(function() {

    const field = 'money';

    $('[tabulator-field=' + field + ']').each(function() {
      const oldCurrency = $(this).text();
      if (oldCurrency !== field) {
        $(this).text(oldCurrency.replace('$', '£'));
      }


    });

  });
</script>


  </body>

</html>