diff --git a/demo/index.html b/demo/index.html
index db4f5548..ddee99cf 100755
--- a/demo/index.html
+++ b/demo/index.html
@@ -17,20 +17,24 @@
 </head> 
 <body class="bod">
   <div class="container">
-    <form class="webstore-load">
-      <label for="source">Source</label>
-      <input type="text" name="source" size="50" />
-      <input type="submit" name="" value="Update" />
-    </form>
-    <!-- <div class="menu-overlay" style="display: none; z-index: 101; ">&nbsp;</div>
+    <div class="menu-overlay" style="display: none; z-index: 101; ">&nbsp;</div>
     <ul class="menu">
     </ul>
     <div id="header">
-      <a href="http://github.com/maxogden/recline"><img id="couchLogo" src="images/couch.png"/></a>
-      <div class="project-title"></div>
-      <div class="project-actions"></div>
+      <div class="project-title">
+        <a href="http://github.com/okfn/recline">Recline DataExplorer</a>
+        / Demo
+      </div>
+      <div class="project-actions">
+        <form class="webstore-load">
+          <label for="source">Source</label>
+          <input type="text" name="source" size="50" />
+          <input type="submit" name="" value="Update" />
+        </form>
+      </div>
       <div class="project-controls"></div>
     </div>
+    <!--
     <div class="main_content">
       <div class="left-panel"></div>
       <div class="right-panel"></div>
diff --git a/demo/js/app.js b/demo/js/app.js
index 9a3caa98..21f360bc 100755
--- a/demo/js/app.js
+++ b/demo/js/app.js
@@ -1,5 +1,6 @@
 $(function() {
   // do not like all these window globals ...
+  // window.$container = $('.container .right-panel');
   window.$container = $('.container');
   var dataset = demoDataset();
   window.dataExplorer = new recline.DataExplorer({
diff --git a/demo/style/data-table.css b/demo/style/data-table.css
index 0db4c813..39cbcde1 100755
--- a/demo/style/data-table.css
+++ b/demo/style/data-table.css
@@ -63,7 +63,6 @@ table {
 }
 
 input, select {
-  vertical-align: middle;
 }
 
 body {
@@ -428,7 +427,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 }
 
 .project-controls, .project-actions {
-  margin: 3px 2px 0px 0px;
+  margin: 0px 2px 0px 0px;
   display: block;
   float: right;
   font-size: 1.3em;
@@ -573,19 +572,6 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   
 }
 
-.data-table-container {
-  display: block;
-  border-top: 1px solid #BCF;
-  overflow: auto;
-  position: absolute;
-  top: 73px;
-  bottom: 0px;
-  left: 5px;
-  right: 0px;
-  background: white;
-  }
-}
-
 .data-table {
   margin: 0;
   padding: 0;
@@ -1195,4 +1181,4 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#f9f9f9));
   background: -moz-linear-gradient(top,  #e3e3e3,  #f9f9f9);
   filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e3e3e3', endColorstr='#f9f9f9');
-}
\ No newline at end of file
+}
diff --git a/demo/style/flot-graph.css b/demo/style/flot-graph.css
index 1c8920ba..64d9c35a 100644
--- a/demo/style/flot-graph.css
+++ b/demo/style/flot-graph.css
@@ -1,12 +1,14 @@
 .data-graph-container .graph {
-  width: 650px;
-  height: 400px;
-  float: left;
+	position: absolute;
+	left: 0;
+	right: 220px;
+	bottom: 0;
+  height: 100%;
 }
 
 .data-graph-container .editor {
-	z-index: 1;
 	background-color: #efefef;
+  position: absolute;
 	right: 0;
 	left: auto;
 	width: 198px;
diff --git a/demo/style/style.css b/demo/style/style.css
index d827a16d..5e073b3a 100755
--- a/demo/style/style.css
+++ b/demo/style/style.css
@@ -209,4 +209,33 @@ span.tooltip-status {
   font-weight:bold;
   color:red;
   text-align:center;
-}
\ No newline at end of file
+}
+
+/* rgrp added mods */
+
+.data-explorer .nav {
+  border-top: 15px solid #BCF;
+  border-left: 5px solid #BCF;
+  display: block;
+  overflow: auto;
+  position: absolute;
+  top: 35px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  background: white;
+  padding-top: 3px;
+}
+
+.data-view-container {
+  display: block;
+  border-top: 1px solid #BCF;
+  border-left: 5px solid #BCF;
+  overflow: auto;
+  position: absolute;
+  top: 83px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  background: white;
+}
diff --git a/src/util.js b/src/util.js
index c647508f..009284c4 100755
--- a/src/util.js
+++ b/src/util.js
@@ -53,10 +53,11 @@ var util = function() {
   
   function observeExit(elem, callback) {
     var cancelButton = elem.find('.cancelButton');
-    app.emitter.on('esc', function() { 
-      cancelButton.click();
-      app.emitter.clear('esc');
-    });
+    // TODO: remove (commented out as part of Backbon-i-fication
+    // app.emitter.on('esc', function() { 
+    //  cancelButton.click();
+    //  app.emitter.clear('esc');
+    // });
     cancelButton.click(callback);
   }
   
@@ -68,7 +69,8 @@ var util = function() {
   function hide( thing ) {
     $('.' + thing ).hide();
     $('.' + thing + '-overlay').hide();
-    if (thing === "dialog") app.emitter.clear('esc'); // todo more elegant solution
+    // TODO: remove or replace (commented out as part of Backbon-i-fication
+    // if (thing === "dialog") app.emitter.clear('esc'); // todo more elegant solution
   }
   
   function position( thing, elem, offset ) {
@@ -98,7 +100,8 @@ var util = function() {
     } else {
       targetDom.html( html );
     }
-    if (template in app.after) app.after[template]();
+    // TODO: remove (commented out as part of Backbon-i-fication
+    // if (template in app.after) app.after[template]();
   }
   
   function notify( message, options ) {
@@ -377,4 +380,4 @@ var util = function() {
     selectedTreePath: selectedTreePath,
     renderTree: renderTree
   };
-}();
\ No newline at end of file
+}();
diff --git a/src/view.js b/src/view.js
index ec42d795..f580beae 100644
--- a/src/view.js
+++ b/src/view.js
@@ -12,6 +12,7 @@ recline.DataExplorer = Backbone.View.extend({
         <label for="nav-graph">Graph</label> \
       </span> \
     </div> \
+    <div class="data-view-container"></div> \
   ',
 
   events: {
@@ -21,6 +22,7 @@ recline.DataExplorer = Backbone.View.extend({
   initialize: function() {
     this.el = $(this.el);
     this.render();
+    this.$dataViewContainer = this.el.find('.data-view-container');
     var self = this;
     // retrieve basic data like headers etc
     // note this.model and dataset returned are the same
@@ -33,8 +35,8 @@ recline.DataExplorer = Backbone.View.extend({
         model: dataset
       });
       self.flotGraph.el.hide();
-      self.el.append(self.dataTable.el)
-      self.el.append(self.flotGraph.el);
+      self.$dataViewContainer.append(self.dataTable.el)
+      self.$dataViewContainer.append(self.flotGraph.el);
     });
   },
 
@@ -61,23 +63,140 @@ recline.DataExplorer = Backbone.View.extend({
 });
 
 recline.DataTable = Backbone.View.extend({
-
   tagName:  "div",
   className: "data-table-container",
 
-  // template: TODO ???
-
-  events: {
-  },
-
   initialize: function() {
     this.el = $(this.el);
-    var that = this;
+    var self = this;
     this.model.getRows().then(function(rows) {
-      that._currentRows = rows;
-      that.render()
+      self._currentRows = rows;
+      self.render()
+    });
+    this.state = {};
+    // this is nasty. Due to fact that .menu element is not inside this view but is elsewhere in DOM
+    $('.menu li a').live('click', function(e) {
+      // self.onMenuClick(e).apply(self);
+      self.onMenuClick(e);
     });
   },
+
+  events: {
+    // see initialize
+    // 'click .menu li': 'onMenuClick',
+    'click .column-header-menu': 'onColumnHeaderClick',
+    'click .row-header-menu': 'onRowHeaderClick',
+    'click .data-table-cell-edit': 'onEditClick',
+    // cell editor
+    'click .data-table-cell-editor .okButton': 'onEditorOK',
+    'click .data-table-cell-editor .cancelButton': 'onEditorCancel'
+  },
+
+  showDialog: function(template, data) {
+    if (!data) data = {};
+    util.show('dialog');
+    util.render(template, 'dialog-content', data);
+    util.observeExit($('.dialog-content'), function() {
+      util.hide('dialog');
+    })
+    $('.dialog').draggable({ handle: '.dialog-header', cursor: 'move' });
+  },
+
+
+  // ======================================================
+  // Column and row menus
+
+  onColumnHeaderClick: function(e) {
+    this.state.currentColumn = $(e.target).siblings().text();
+    util.position('menu', e);
+    util.render('columnActions', 'menu');
+  },
+
+  onRowHeaderClick: function(e) {
+    this.state.currentRow = $(e.target).parents('tr:first').attr('data-id');
+    util.position('menu', e);
+    util.render('rowActions', 'menu');
+  },
+
+  onMenuClick: function(e) {
+    var self = this;
+    e.preventDefault();
+    var actions = {
+      bulkEdit: function() { self.showDialog('bulkEdit', {name: self.state.currentColumn}) },
+      transform: function() { showDialog('transform') },
+      csv: function() { window.location.href = app.csvUrl },
+      json: function() { window.location.href = "_rewrite/api/json" },
+      urlImport: function() { showDialog('urlImport') },
+      pasteImport: function() { showDialog('pasteImport') },
+      uploadImport: function() { showDialog('uploadImport') },
+      deleteColumn: function() {
+        var msg = "Are you sure? This will delete '" + self.state.currentColumn + "' from all documents.";
+        // TODO:
+        alert('This function needs to be re-implemented');
+        return;
+        if (confirm(msg)) costco.deleteColumn(self.state.currentColumn);
+      },
+      deleteRow: function() {
+        // TODO:
+        alert('This function needs to be re-implemented');
+        return;
+        var doc = _.find(app.cache, function(doc) { return doc._id === app.currentRow });
+        doc._deleted = true;
+        costco.uploadDocs([doc]).then(
+          function(updatedDocs) { 
+            util.notify("Row deleted successfully");
+            recline.initializeTable(app.offset);
+          },
+          function(err) { util.notify("Errorz! " + err) }
+        )
+      }
+    }
+    
+    util.hide('menu');
+    actions[$(e.target).attr('data-action')]();
+  },
+
+  // ======================================================
+  // Cell Editor
+
+  onEditClick: function(e) {
+    var editing = this.el.find('.data-table-cell-editor-editor');
+    if (editing.length > 0) {
+      editing.parents('.data-table-cell-value').html(editing.text()).siblings('.data-table-cell-edit').removeClass("hidden");
+    }
+    $(e.target).addClass("hidden");
+    var cell = $(e.target).siblings('.data-table-cell-value');
+    cell.data("previousContents", cell.text());
+    util.render('cellEditor', cell, {value: cell.text()});
+  },
+
+  onEditorOK: function(e) {
+    var cell = $(e.target);
+    var rowId = cell.parents('tr').attr('data-id');
+    var header = cell.parents('td').attr('data-header');
+    var newValue = cell.parents('.data-table-cell-editor').find('.data-table-cell-editor-editor)').val();
+    // TODO:
+    alert('Update: ' + header + ' with value ' + newValue + '(But no save as not yet operational');
+    return;
+    var doc = _.find(app.cache, function(cacheDoc) {
+      return cacheDoc._id === rowId;
+    });
+    doc[header] = newValue;
+    util.notify("Updating row...", {persist: true, loader: true});
+    costco.updateDoc(doc).then(function(response) {
+      util.notify("Row updated successfully");
+      recline.initializeTable();
+    })
+  },
+
+  onEditorCancel: function(e) {
+    var cell = $(e.target).parents('.data-table-cell-value');
+    cell.html(cell.data('previousContents')).siblings('.data-table-cell-edit').removeClass("hidden");
+  },
+
+  // ======================================================
+  // Core Templating
+
   toTemplateJSON: function() {
     var modelData = this.model.toJSON()
     modelData.rows = _.map(this._currentRows, function(row) {
