Handsontable example
HTML
<link rel="stylesheet" href="https://docs.handsontable.com/pro/1.14.2/bower_components/handsontable-pro/dist/handsontable.full.min.css">
<script src="https://docs.handsontable.com/pro/1.14.2/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<div id="example1"></div>
CSS
.handsontable .wrapper {
background: yellow;
padding: 5px;
}
JavaScript
document.addEventListener("DOMContentLoaded", function() {
var changedRowIndexArr =[];
var
example = document.getElementById('example1'),
hot;
data = [{
accountname: "XYZ",
shipto: "007",
year: 2017,
budget: 34000,
gm: ""
}, {
accountname: "test",
shipto: "007",
year: 2018,
budget: 40000,
gm: ""
}, {
accountname: "Test",
shipto: "",
year: 2017,
budget: "",
gm: ""
}, {
accountname: "ABCD",
shipto: "",
year: 2018,
budget: "",
gm: ""
}, {
accountname: "ABCD",
shipto: "",
year: 2017,
budget: "",
gm: ""
}, {
accountname: "XYZ",
shipto: "",
year: 2018,
budget: "",
gm: ""
}];
hot = new Handsontable(example, {
data: data,
rowHeaders: true,
colHeaders: true,
contextMenu: {
items: { "copy": {name: "Copy"},
"paste": {
name: 'Paste',
callback: function () {
this.copyPaste.triggerPaste();
}
} }
},
contextMenuCopyPaste: {
swfPath: 'js/ZeroClipboard.swf'
},
afterChange: function(changes, source){
if(source === 'edit'||source==='paste' ){
if((changedRowIndexArr!=null && changedRowIndexArr.length==0) || $.inArray(changes[0][0], changedRowIndexArr) == -1){
changedRowIndexArr.push(changes[0][0]);
}
}
}
});
});