diff --git a/frontend/src/pages/data-grid/store/apply.js b/frontend/src/pages/data-grid/store/apply.js
new file mode 100644
index 0000000000..3085811486
--- /dev/null
+++ b/frontend/src/pages/data-grid/store/apply.js
@@ -0,0 +1,52 @@
+import OperationTypes from './operation-types';
+import GridColumn from '../model/grid-column';
+import GridRow from '../model/grid-row';
+
+function apply(value, op) {
+
+  let { type } = op;
+  let next = value.slice(0);  // clone a copy
+
+  switch(type) {
+    case OperationTypes.DELETE_ROW : {
+      let { rowIdx } = op;
+      next.splice(rowIdx, 1);
+      return next;
+    }
+
+    case OperationTypes.INSERT_ROW : {
+      let { newRowIdx } = op;
+      let row = new GridRow({newRowIdx});
+      next.push(row);
+      return next;
+    }
+
+    case OperationTypes.DELETE_COLUMN : {
+      let { idx } = op;
+      next.splice(idx, 1);
+      return next;
+    }
+
+    case OperationTypes.INSERT_COLUMN : {
+      let { idx, columnName, columnType } = op;
+      let column = new GridColumn({idx, columnName, columnType});
+      next.push(column);
+      return next;
+    }
+
+    case OperationTypes.MODIFY_CELL : {
+      let { rowIdx, key, newCellValue } = op;
+      next[rowIdx][key] = newCellValue;
+      return next;
+    }
+
+    case OperationTypes.MODIFY_COLUMN : {
+      let { idx, newColumnName } = op;
+      next[idx]['key'] = newColumnName;
+      next[idx]['name'] = newColumnName;
+      return next;
+    }
+  }
+}
+
+export default apply;
diff --git a/frontend/src/pages/data-grid/store/invert.js b/frontend/src/pages/data-grid/store/invert.js
new file mode 100644
index 0000000000..e015f19572
--- /dev/null
+++ b/frontend/src/pages/data-grid/store/invert.js
@@ -0,0 +1,35 @@
+import Operation from './operation';
+import OperationTypes from './operation-types';
+
+function invert(operation) {
+
+  let op = new Operation(operation);
+  let { type } = operation;
+  switch(type) {
+
+    case OperationTypes.DELETE_COLUMN : {
+      op.type = OperationTypes.INSERT_COLUMN;
+      return op;
+    }
+
+    case OperationTypes.INSERT_COLUMN : {
+      op.type = OperationTypes.DELETE_COLUMN;
+      return op;
+    }
+
+    case OperationTypes.DELETE_ROW : {
+      op.type = OperationTypes.INSERT_ROW;
+      return op;
+    }
+
+    case OperationTypes.INSERT_ROW : {
+      op.type = OperationTypes.DELETE_ROW;
+      return op;
+    }
+
+    default :
+      break;
+  }
+}
+
+export default invert;
diff --git a/frontend/src/pages/data-grid/store/operation.js b/frontend/src/pages/data-grid/store/operation.js
new file mode 100644
index 0000000000..24aa2a846e
--- /dev/null
+++ b/frontend/src/pages/data-grid/store/operation.js
@@ -0,0 +1,20 @@
+import apply from './apply';
+import invert from './invert';
+
+export default class Operation {
+
+  constructor(operation) {
+    this.operation = operation;
+  }
+
+  apply(value) {
+    let next = apply(value, this.operation);
+    return next;
+  }
+
+  invert() {
+    let inverted = invert(this);
+    return inverted;
+  }
+
+}