diff --git a/frontend/src/pages/data-grid/app-main.js b/frontend/src/pages/data-grid/app-main.js
index f81145434b..dedbb125aa 100644
--- a/frontend/src/pages/data-grid/app-main.js
+++ b/frontend/src/pages/data-grid/app-main.js
@@ -26,14 +26,16 @@ class AppMain extends React.Component {
         resizable: true
       }
     ];
-
+    
     let initData = props.initData;
-
+    
     this.state = {
       columns: initData.columns.length ? this.deseralizeGridData(initData.columns) : this._columns,
       rows: initData.rows.length ? initData.rows : this.createRows(1),
       isNewColumnDialogShow: false,
     };
+
+    this.dTableStore = new DTableStore(initData);
   }
 
   componentDidMount() {
@@ -109,7 +111,8 @@ class AppMain extends React.Component {
 
   onInsertRow = () => {
     let newRowIndex = this.getSize();
-    this.handleAddRow({ newRowIndex });
+    let rows = this.dTableStore.insertRow(newRowIndex);
+    this.setState({rows});
     this.props.onContentChanged();
   }
 
@@ -126,18 +129,9 @@ class AppMain extends React.Component {
   }
 
   onNewColumn = (columnName, columnType) => {
-    let editor = this.createEditor(columnType);
-    let newColumn = {
-      key: columnName,
-      name: columnName,
-      editor: editor,
-      editable: true,
-      width: 200,
-      resizable: true
-    };
-
-    let columns = this.state.columns.slice();
-    columns.push(newColumn);
+    let idx = this.state.columns.length;
+    let columns = this.dTableStore.insertColumn(idx, columnName, columnType);
+    columns = this.formatColumnsData(columns);
     this.setState({columns: columns});
     this.onNewColumnCancel();
     this.props.onContentChanged();
@@ -150,24 +144,16 @@ class AppMain extends React.Component {
 
   onRowDelete = (e, data) => {
     let { rowIdx } = data;
-    let newRows = this.state.rows.slice(0); // copy array;
-    newRows.splice(rowIdx, 1);
-    this.setState({rows: newRows});
+    let rows = this.dTableStore.deleteRow(rowIdx);
+    this.setState({rows});
     this.props.onContentChanged();
   }
 
   onColumnDelete = (e, data) => {
     let column = data.column;
-    let key = column.key;
-    let columns = this.state.columns.filter(item => item.key !== key);
-    let rows = this.state.rows.map(item => {
-      delete item[key];
-      return item;
-    });
-    this.setState({
-      columns: columns,
-      rows: rows
-    });
+    let idx = column.idx - 1;
+    let columns = this.dTableStore.deleteColumn(idx);
+    this.setState({columns});
     this.props.onContentChanged();
   }
 
@@ -187,6 +173,8 @@ class AppMain extends React.Component {
       columns: columns,
       rows: rows,
     });
+
+    this.dTableStore.updateStoreValues({columns, rows});
   }
 
   formatColumnsData = (columns) => {
diff --git a/frontend/src/pages/data-grid/model/GridColumn.js b/frontend/src/pages/data-grid/model/GridColumn.js
index 526bc9ba29..50b02ef01a 100644
--- a/frontend/src/pages/data-grid/model/GridColumn.js
+++ b/frontend/src/pages/data-grid/model/GridColumn.js
@@ -3,7 +3,7 @@ export default class GridColumn {
   constructor(object) {
     this.key = object.columnName || object.name;
     this.name = object.columnName || object.name;
-    this.type = object.columnType || null;
+    this.editor = object.columnType || null;
     this.editable = object.editable || true;
     this.width = object.width || 200;
     this.resizable = object.resizable || true;
diff --git a/frontend/src/pages/data-grid/store/Apply.js b/frontend/src/pages/data-grid/store/Apply.js
index da5d623ccb..a8b12e46cb 100644
--- a/frontend/src/pages/data-grid/store/Apply.js
+++ b/frontend/src/pages/data-grid/store/Apply.js
@@ -5,45 +5,43 @@ import GridRow from '../model/GridRow';
 function apply(value, op) {
 
   let { type } = op;
-  value = value.slice(0);  // clone a copy
+  let next = value.slice(0);  // clone a copy
 
   switch(type) {
     case OperationTypes.DELETE_ROW : {
       let { rowIdx } = op;
-      let next = value.splice(rowIdx, 1);
+      next.splice(rowIdx, 1);
       return next;
     }
 
     case OperationTypes.INSERT_ROW : {
       let { newRowIdx } = op;
       let row = new GridRow({newRowIdx});
-      let next = value.push(row);
+      next.push(row);
       return next;
     }
 
     case OperationTypes.DELETE_COLUMN : {
       let { idx } = op;
-      let next = value.splice(idx, 1);
+      next.splice(idx, 1);
       return next;
     }
 
     case OperationTypes.INSERT_COLUMN : {
       let { idx, columnName, columnType } = op;
       let column = new GridColumn({idx, columnName, columnType});
-      let next = value.push(column);
+      next.push(column);
       return next;
     }
 
     case OperationTypes.MODIFY_CELL : {
       let { rowIdx, key, newCellValue } = op;
-      let next = value;
       next[rowIdx][key] = newCellValue;
       return next;
     }
 
     case OperationTypes.MODIFY_COLUMN : {
       let { idx, newColumnName } = op;
-      let next = value;
       next[idx]['key'] = newColumnName;
       next[idx]['name'] = newColumnName;
       return next;
diff --git a/frontend/src/pages/data-grid/store/DTableStore.js b/frontend/src/pages/data-grid/store/DTableStore.js
index 416a510569..520259d5e8 100644
--- a/frontend/src/pages/data-grid/store/DTableStore.js
+++ b/frontend/src/pages/data-grid/store/DTableStore.js
@@ -22,24 +22,33 @@ export default class DTableStore {
   deleteRow(rowIdx) {
     let type = OperationTypes.DELETE_ROW;
     let operation = this.createOperation({type, rowIdx});
-    let next = operation.apply(type);
+    let next = operation.apply(this.rows);
+
     this.operations.push(operation);
+    this.rows = next;
+
     return next;
   }
 
   insertRow(newRowIdx) {
     let type = OperationTypes.INSERT_ROW;
     let operation = this.createOperation({type, newRowIdx});
-    let next = operation.apply(type);
+    let next = operation.apply(this.rows);
+
     this.operations.push(operation);
+    this.rows = next;
+
     return next;
   }
 
   deleteColumn(idx) {
-    let type = OperationTypes.INSERT_COLUMN;
+    let type = OperationTypes.DELETE_COLUMN;
     let operation = this.createOperation({type, idx});
     let next = operation.apply(this.columns);
+
     this.operations.push(operation);
+    this.columns = next;
+
     return next;
   }
 
@@ -47,7 +56,10 @@ export default class DTableStore {
     let type = OperationTypes.INSERT_COLUMN;
     let operation = this.createOperation({type, idx, columnName, columnType});
     let next = operation.apply(this.columns);
+
     this.operations.push(operation);
+    this.columns = next;
+
     return next;
   }
 
@@ -55,7 +67,10 @@ export default class DTableStore {
     let type = OperationTypes.MODIFY_COLUMN;
     let operation = this.createOperation({type, idx, oldColumnName, newColumnName});
     let next = operation.apply(this.columns);
+
     this.operations.push(operation);
+    this.columns = next;
+
     return next;
   }
 
@@ -64,7 +79,10 @@ export default class DTableStore {
     let key = this.columns[idx].key;
     let operation = this.createOperation({type, rowIdx, key, oldCellValue, newCellValue});
     let next = operation.apply(this.rows);
+
     this.operations.push(operation);
+    this.rows = next;
+
     return next;
   }