Handsontable example

by handsoncode

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: 0.032354
    },
    {
      car: "Citroen C4 Coupe",
      year: 2018,
      price_usd: 8330,
      discount: 0.02664
    },
    {
      car: "Audi A4 Avant",
      year: 2019,
      price_usd: 33900,
      discount: 0.0834523
    },
    {
      car: "Opel Astra",
      year: 2020,
      price_usd: 5000,
      discount: 0.062344
    },
    {
      car: "BMW 320i Coupe",
      year: 2021,
      price_usd: 30500,
      discount: 0.06234
    }
  ],
  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: 'numeric',
      numericFormat: {
        pattern: {
          output: 'percent',
          mantissa: 0
        }
      }
    }
  ]
});