Handsontable example

by handsoncode

HTML

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

CSS

</style><!-- Ugly Hack due to jsFiddle issue --> <script src="http://docs.handsontable.com/0.24.1/bower_components/handsontable/dist/handsontable.full.js"></script> <link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/0.24.1/bower_components/handsontable/dist/handsontable.full.min.css"> <script src="http://docs.handsontable.com/0.24.1/bower_components/numeraljs/languages/de.js"></script>

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  function getCarData() {
    return [{
      car: "Mercedes A 160",
      year: 2011,
      price_usd: 7000,
      price_eur: 7000
    }, {
      car: "Citroen C4 Coupe",
      year: 2012,
      price_usd: 8330,
      price_eur: 8330
    }, {
      car: "Audi A4 Avant",
      year: 2013,
      price_usd: 33900,
      price_eur: 33900
    }, {
      car: "Opel Astra",
      year: 2014,
      price_usd: 5000,
      price_eur: 5000
    }, {
      car: "BMW 320i Coupe",
      year: 2015,
      price_usd: 30500,
      price_eur: 30500
    }];
  }

  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',
      format: '$0,0.00',
      language: 'en', // this is the default locale, set up for USD
      allowEmpty: false
    }, {
      data: 'price_eur',
      type: 'numeric',
      format: '0,0.00 $',
      language: 'de' // i18n: use this for EUR (German)
        // more locales available on numeraljs.com
    }],
    beforeChange: function(source, changes){
    	console.log(source[0]);
    }
  });

});