Handsontable example

by handsoncode

HTML

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

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="https://docs.handsontable.com/pro/5.0.1/components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/5.0.1/components/handsontable-pro/dist/handsontable.full.min.css">
<script src="https://docs.handsontable.com/pro/5.0.1/components/numbro/dist/languages.min.js"></script>

JavaScript

function getCarData() {
    return [
      {car: "Mercedes A 160", year: 2017, price_usd: 7000.5, price_eur: 70.20},
      {car: "Citroen C4 Coupe", year: 2018, price_usd: 8330.99, price_eur: 59.99},
      {car: "Audi A4 Avant", year: 2019, price_usd: 33900.599, price_eur: 22.00},
      {car: "Opel Astra", year: 2020, price_usd: 5000, price_eur: 1.15},
      {car: "BMW 320i Coupe", year: 2021, price_usd: 30500, price_eur: 35.50}
    ];
  }
  var
    container = document.getElementById('example1'),
    hot;
  
  hot = new Handsontable(container, {
    data: getCarData(),
    colHeaders: ['Car', 'Year', 'Price ($)', 'Price (€)'],
    columnSorting : true,
    columns: [
      {
        data: 'car'
        // 1nd column is simple text, no special options here
      },
      {
        data: 'year',
        type: 'numeric'
      },
      {
        data: 'price_usd',
        type: 'numeric',
        numericFormat: {
          pattern: '$0,00.00',
          culture: 'en-US' // this is the default culture, set up for USD
        },
        allowEmpty: false
      },
      {
        data: 'price_eur',
        type: 'numeric',
        numericFormat: {
          pattern: '0,0.00 $',
          culture: 'de-DE' // use this for EUR (German),
          // more cultures available on http://numbrojs.com/languages.html
        }
      }
    ]
  });