Handsontable example

by handsoncode

HTML

<script src="https://docs.handsontable.com/bower_components/numbro/dist/languages.min.js"></script>
<script src="https://docs.handsontable.com/bower_components/handsontable/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" href="https://docs.handsontable.com/bower_components/handsontable/dist/handsontable.full.min.css">
<div id="example1" class="hot handsontable htColumnHeaders"></div>

CSS

body {
  background: #FFF;
  padding: 0;
  margin: 0;
  font-size: 0.8em
}

JavaScript

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

  function getCarData() {
    return [
      ['failed values', 'MICROSOFT OEM WINDOWS HOME 10 EN'],
      [1350.14, 'APPLE IMAC I5-5250U 1TB 21,5" 8GB MAC OS'],
      [520.78, 'LENOVO THINKCENTRE TINY WIN10PRO M600 500GB PENTIUM 4GB G4400'],
      [156.24, 'LOGITECH M100 USB MOUSE 910-001604 BLACK']
    ];
  }

  var
    container = document.getElementById('example1'),
    hot;

  hot = new Handsontable(container, {
    data: getCarData(),
    colHeaders: ['Price', 'Item'],
    licenseKey: 'non-commercial-and-evaluation',
    colWidths: [150, 607],
    columns: [{
      renderer: Handsontable.renderers.NumericRenderer,
      editor: Handsontable.editors.TextEditor,
      validator: Handsontable.validators.NumericValidator,
      numericFormat: {
          pattern: '$0,0.00 $',
          culture: 'en-US'
        }
    }, {
      renderer: Handsontable.renderers.TextRenderer,
      editor: Handsontable.editors.TextEditor,
    }],
    cells: function(row, column){
    	var cellProperties = {};
      if(row === 0 && column === 0){
      	cellProperties.type = 'dropdown';
        cellProperties.source = [1500, 1000, 500, 100, 50, 10],
        cellProperties.renderer = Handsontable.renderers.NumericRenderer,
        cellProperties.format = '$0,0.00',
        cellProperties.language = 'en-US'
      }
      return cellProperties;
    }
  });

  hot.validateCells();

});