Ability to show and hide columns on demand, fixes #29

css/data-explorer.css

@@ -150,7 +150,7 @@
   * Data Table Menus
   *********************************************************/
 
-a.column-header-menu {
+a.column-header-menu, a.root-header-menu {
   float: right;
   display: block;
   margin: 0 4px 0 0;
@@ -160,7 +160,7 @@ a.column-header-menu {
   background-repeat: no-repeat;
 }
 
-a.row-header-menu:hover {
+a.row-header-menu:hover, a.root-header-menu:hover {
   background-position: -17px 0px;
   text-decoration: none;
 }
@@ -175,6 +175,10 @@ a.row-header-menu {
   background-repeat: no-repeat;
 }
 
+.read-only a.row-header-menu {
+  display: none;
+}
+
 a.column-header-menu:hover {
   background-position: -17px 0px;
   text-decoration: none;
@@ -511,11 +515,12 @@ td.expression-preview-value {
   * Read-only mode
   *********************************************************/
 
-.read-only .data-table tr td:first-child,
+/*.read-only .data-table tr td:first-child,
 .read-only .data-table tr th:first-child
 {
   display: none;
 }
+*/
 
 .read-only .write-op,
 .read-only a.data-table-cell-edit

src/util.js

@@ -9,6 +9,10 @@ var util = function() {
       <li><a data-action="hideColumn" class="menuAction" href="JavaScript:void(0);">Hide this column</a></li> \
     '
     , rowActions: '<li><a data-action="deleteRow" class="menuAction write-op" href="JavaScript:void(0);">Delete this row</a></li>'
+    , rootActions: ' \
+        {{#columns}} \
+        <li><a data-action="showColumn" data-column="{{.}}" class="menuAction" href="JavaScript:void(0);">Add column: {{.}}</a></li> \
+        {{/columns}}'
     , cellEditor: ' \
       <div class="menu-container data-table-cell-editor"> \
         <textarea class="data-table-cell-editor-editor" bind="textarea">{{value}}</textarea> \

src/view.js

@@ -192,6 +192,7 @@ my.DataTable = Backbone.View.extend({
   events: {
     'click .column-header-menu': 'onColumnHeaderClick'
     , 'click .row-header-menu': 'onRowHeaderClick'
+    , 'click .root-header-menu': 'onRootHeaderClick'
     , 'click .data-table-menu li a': 'onMenuClick'
   },
 
@@ -222,6 +223,11 @@ my.DataTable = Backbone.View.extend({
     util.render('rowActions', 'data-table-menu');
   },
   
+  onRootHeaderClick: function(e) {
+    util.position('data-table-menu', e);
+    util.render('rootActions', 'data-table-menu', {'columns': this.hiddenHeaders});
+  },
+
   onMenuClick: function(e) {
     var self = this;
     e.preventDefault();
@@ -231,6 +237,7 @@ my.DataTable = Backbone.View.extend({
       sortAsc: function() { self.setColumnSort('asc') },
       sortDesc: function() { self.setColumnSort('desc') },
       hideColumn: function() { self.hideColumn() },
+      showColumn: function() { self.showColumn(e) },
       // TODO: Delete or re-implement ...
       csv: function() { window.location.href = app.csvUrl },
       json: function() { window.location.href = "_rewrite/api/json" },
@@ -299,11 +306,16 @@ my.DataTable = Backbone.View.extend({
     this.model.query(query);
   },
   
-  hideColumn: function(order) {
+  hideColumn: function() {
     this.hiddenHeaders.push(this.state.currentColumn);
     this.render();
   },
   
+  showColumn: function(e) {
+    this.hiddenHeaders = _.without(this.hiddenHeaders, $(e.target).data('column'));
+    this.render();
+  },
+
   // ======================================================
   // Core Templating
   template: ' \
@@ -312,7 +324,14 @@ my.DataTable = Backbone.View.extend({
     <table class="data-table" cellspacing="0"> \
       <thead> \
         <tr> \
-          {{#notEmpty}}<th class="column-header"></th>{{/notEmpty}} \
+          {{#notEmpty}} \
+            <th class="column-header"> \
+              <div class="column-header-title"> \
+                <a class="root-header-menu"></a> \
+                <span class="column-header-name"></span> \
+              </div> \
+            </th> \
+          {{/notEmpty}} \
           {{#headers}} \
             <th class="column-header"> \
               <div class="column-header-title"> \
@@ -351,6 +370,7 @@ my.DataTable = Backbone.View.extend({
         });
       newView.render();
     });
+    $(".root-header-menu").toggle((self.hiddenHeaders.length > 0));
     return this;
   }
 });