[#22,css][s]: add specific div for data explorer to live in in demo (so we are not tied to specific html).

* also minor fix to data table to have th for header row.

demo/index.html

@@ -34,6 +34,7 @@
       </div>
       <div class="project-controls"></div>
     </div>
+    <div class="data-explorer-here"></div>
     <!--
     <div class="main_content">
       <div class="left-panel"></div>

demo/js/app.js

@@ -1,7 +1,7 @@
 $(function() {
   // do not like all these window globals ...
   // window.$container = $('.container .right-panel');
-  window.$container = $('.container');
+  window.$container = $('.data-explorer-here');
   var dataset = demoDataset();
   window.dataExplorer = new recline.View.DataExplorer({
     model: dataset

src/view.js

@@ -223,15 +223,15 @@ my.DataTable = Backbone.View.extend({
     <table class="data-table" cellspacing="0"> \
       <thead> \
         <tr> \
-          {{#notEmpty}}<td class="column-header"></td>{{/notEmpty}} \
+          {{#notEmpty}}<th class="column-header"></th>{{/notEmpty}} \
           {{#headers}} \
-            <td class="column-header"> \
+            <th class="column-header"> \
               <div class="column-header-title"> \
                 <a class="column-header-menu"></a> \
                 <span class="column-header-name">{{.}}</span> \
               </div> \
               </div> \
-            </td> \
+            </th> \
           {{/headers}} \
         </tr> \
       </thead> \
@@ -246,9 +246,7 @@ my.DataTable = Backbone.View.extend({
   },
   render: function() {
     var self = this;
-    var template = $( ".dataTableTemplate:first" ).html()
-      , htmls = $.mustache(template, this.toTemplateJSON())
-      ;
+    var htmls = $.mustache(this.template, this.toTemplateJSON());
     this.el.html(htmls);
     this.model.currentDocuments.forEach(function(doc) {
       var tr = $('<tr />');