Handsontable example

by handsoncode

HTML

<div>
  <div id="hot"></div>
</div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue --> <script src="https://docs.handsontable.com/pro/1.10.1/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.10.1/bower_components/handsontable-pro/dist/handsontable.full.min.css"> <style> .test,
.test2 {
  border: 0;
  color: #FFF;
  padding: 0.4em
}

.test {
  background: #651FFF;
}

.test2 {
  background: #F50057;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
var dataObject = [
    {
    	"AssetId": 11134,
    	"Platform": "New",
    	"AnotherField": "RandomVal1",
    },
    {
    	"AssetId": 11135,
    	"Platform": "New",
    	"AnotherField": "RandomVal2",
    },
    {
    	"AssetId": 11136,
    	"Platform": "New",
    	"AnotherField": "RandomVal3",
    },
    {
    	"AssetId": 11137,
    	"Platform": "New",
    	"AnotherField": "RandomVal4",	
    }
];

 // var dataObject = Model.getJSMetaData;
  var hotElement = document.querySelector('#hot');
  //var hotElementContainer = hotElement.parentNode;
  var hotSettings = {
    data: dataObject,
    //data: Handsontable.helper.createSpreadsheetData(10, 10),
    columns: [{
      data: 'AssetId',
      type: 'numeric',
      width: 60
    }, {
      data: 'Platform',
      type: 'numeric',
    }, {
      data: 'AnotherField',
      type: 'text'
    }],
    colHeaders: ['AssetId', 'Platform', 'AnotherField'],
    columnSorting: {
      column: 0
    },
    sortIndicator: true,
    stretchH: 'all',
    //width: '100%',
    autoWrapRow: true,
    //height: '100%',
    contextMenu: true,
    minSpareRows: 0,
    allowInsertRow: false,
    allowInsertColumn: false,
    //maxRows: 22,
    rowHeaders: true,
    wordWrap: false,
    dropdownMenu: true,
    filters: true,
    allowRemoveColumn: true,
    manualColumnResize: true,
    manualRowResize: true,
    readOnly: true,
    multiSelect: false,
    columnSorting: true,
    manualColumnMove: true,
    //afterOnCellMouseDown: itemSelected
  };

  var hot = new Handsontable(hotElement, hotSettings);

});