Handsontable example

HTML

<div id="example1" class="hot handsontable htColumnHeaders"></div>

CSS

</style>< !-- Ugly Hack due to jsFiddle issue --><script src="https://docs.handsontable.com/pro/6.2.0/components/handsontable-pro/dist/handsontable.full.min.js"></script><link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/6.2.0/components/handsontable-pro/dist/handsontable.full.min.css"><script src="https://docs.handsontable.com/pro/6.2.0/components/numbro/dist/languages.min.js"></script>

JavaScript

function getCarData() {
    return [{
        Units: 7000.11,
        price: 0.62354
      },
      {
        Units: 8330.51,
        price: 0.2664
      },
      {
        Units: 33900.33,
        price: 0.834523
      },
      {
        Units: 5000.22,
        price: 0.62344
      },
      {
        Units: 30500.88,
        price: 0.6234
      }
    ];
  }

  function myRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    td.innerHTML = Math.round(value)
  }

  var
    container = document.getElementById('example1'),
    hot = new Handsontable(container, {
      data: getCarData(),
      colHeaders: ['Units', 'Price (£)'],
      columnSorting: true,
      columns: [{
          data: 'Units',
          type: 'numeric',
          renderer: myRenderer
        },
        {
          data: 'price',
          type: 'numeric',
          numericFormat: {
            pattern: '0,0.0',
            culture: 'de-GB' // use this for EUR (German),
            // more cultures available on http://numbrojs.com/languages.html
          }
        }
      ]
    });

  hot.render()