Handsontable example

by Blake Gilchrist

HTML

<div id="example"></div>
<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">

Babel + JSX

const container = document.getElementById('example');
const hot = new Handsontable(container, {
  data: [
    {
      car: "Mercedes A 160",
      year: 2017,
      price_usd: 7000,
      discount: 2
    },
    {
      car: "Citroen C4 Coupe",
      year: 2018,
      price_usd: 8330,
      discount: 5
    },
    {
      car: "Audi A4 Avant",
      year: 2019,
      price_usd: 33900,
      discount: 1
    },
    {
      car: "Opel Astra",
      year: 2020,
      price_usd: 5000,
      discount: 3
    },
    {
      car: "BMW 320i Coupe",
      year: 2021,
      price_usd: 30500,
      discount: 1
    }
  ],
  licenseKey: 'non-commercial-and-evaluation',
  colHeaders: true,
  columns: [
  	{
    	title:'Car',
      data: 'car',
    },
    {
    	title: 'Year',
      data: 'year',
      type: 'numeric',
    },
    {
    	title: 'Price ($)',
      data: 'price_usd',
      type: 'numeric',
      numericFormat: {
        pattern: {
        	output: 'currency',
          mantissa: 2,
        },
      },
      allowEmpty: false,
    },
    {
    	title: 'Discount (%)',
      data: 'discount',
      type: 'number',
      mantissa: 2,
     	renderer: function(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.NumericRenderer.apply(this, arguments);
  td.innerHTML = `${value} %`
}
    }
  ]
});