Handsontable example

by Justin Peszleny

HTML

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

CSS

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

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

JavaScript

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

  var sourceDataObject = [
            {
              PartNumber: 'SR12345671-1',
              Rev: null,
              Material: null,
              ScrapPercentage: null,
              Weight: null,
              WorkCenter: null,
              Time: null,
              Notes: null,
              __children: [
              	{
                  	Rev: 'A',
                    Material: 'STH2119',
                    ScrapPercentage: '40',
                    Weight: '11.186',
                    WorkCenter: 'NCT',
                    Time: '0.016',
                    Notes: '',
                }, {
                  	Rev: 'A',
                    Material: 'FIPG',
                    ScrapPercentage: '0',
                    Weight: '0',
                    WorkCenter: 'FIPG',
                    Time: '0.003',
                    Notes: 'FIPG Length: 196.056',
                }
          		]

		}],
    container = document.getElementById('example1'),
    hot;
  
  hot = new Handsontable(container, {
    data: sourceDataObject,
    rowHeaders: true,
    colHeaders: ['Part Number', 'Rev', 'Material', 'Scrap %', 'Weight', 'Work Center', 'Time', 'Notes'],
    nestedRows: true
  });
 

});