Handsontable example

HTML

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

CSS

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

JavaScript

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

  var optionsWBS = {
    '': [''],
    'DataAcq': ['', 'Bus', 'Data'],
    'NetDesign': ['', 'Network', 'Design'],
    'InfDesign': ['', 'Cabinet ', 'CIJB'],
    'Program': ['', 'Project', 'Travel']
  };

  var optionsMap = {
    '': [''],
    'PM': ['150'],
    'Con': ['250'],
    'Mg': ['350']
  };

  var
    container = document.getElementById('example1'),
    hot;
    
  var cols =  [{
      type: 'dropdown',
      source: ['', 'DataAcq', 'NetDesign', 'InfDesign', 'Program'],
 //     strict: true
    }, {}, {
      type: 'dropdown',
      source: ['', 'PM', 'Con', 'Mgr'],
  //   strict: true
    }, {
      type: 'autocomplete',
 //     strict: true
    }, {}, {}, {}, {}, {
      type: 'autocomplete',
  //    strict: true
    }, {}, {}];

  hot = new Handsontable(container, {
    data: [[""]],
    startRows: 7,
    startCols: 11,
    minSpareCols: 1,
    minSpareRows: 1,
    colHeaders: ["WBS", "SubWBS", "Resource", "Description", "Off", "FTE", "Duration", "Hs", "Rate", "Cost"],
    columns: cols,
    beforeChange: function(source, changes){
    	console.log(source, changes)
    },
     afterChange: function(source, changes){
    	console.log(source, changes);
      if(!source) return;
       if(source[0][1] == 0){//if ocurs on col 0
      		let newsource = optionsWBS[source[0][3]];
         	cols[1] = {
         							type : 'dropdown',
          						source: newsource,
               				strict: false
         						};
          hot.updateSettings({columns: cols});
          hot.render();
      };
    }
  });
});