Working solution for adding rows and columns at the expected location

app/components/Home.js

@@ -49,15 +49,40 @@ export default class Home extends React.Component {
         hideRow: this.onChange,
         deleteColumn: this.onChange,
         deleteRow: this.onChange,
-        insertColumn: () => {
-          var workbook = this.getJSON();
+        insertColumn: (event) => {
+          let workbook = this.getJSON();
           workbook.columns = ++this.numColumns;
+
+          let sheet = workbook.sheets.find(e => e.name === workbook.activeSheet);
+
+          // for every row in this sheet data
+          // iterate over all of each rows' cells and add 1
+          // KendoUI provides the correct index corresponding to add 'left' or 'right'
+          sheet.rows.forEach(row => {
+            row.cells.forEach(cell => {
+              if(cell.index >= event.index) {
+                cell.index += 1;
+              }
+            });
+          });
+
           this.getSpreadsheet().fromJSON(workbook);
           this.onChange();
         },
         insertRow: (event) => {
-          var workbook = this.getJSON();
+          let workbook = this.getJSON();
           workbook.rows = ++this.numRows;
+
+          let sheet = workbook.sheets.find(e => e.name === workbook.activeSheet);
+
+          // iterate over each row and add 1 to the index
+          // KendoUI provides the correct index corresponding to add 'above' or 'below'
+          sheet.rows.forEach(row => {
+            if(row.index >= event.index) {
+              row.index += 1;
+            }
+          });
+
           this.getSpreadsheet().fromJSON(workbook);
           this.onChange();
         }