Add row detail functionality (issue #173)

src/data/sample.json

@@ -166,7 +166,8 @@
         "chartType": "table",
         "provider": "socrata",
         "domain": "data.cityofchicago.org",
-        "dataset": "xqx5-8hwx"
+        "dataset": "xqx5-8hwx",
+        "rowDetails": true
       }
     }
   ]

src/scripts/templates/row-details.html

@@ -0,0 +1,14 @@
+<div class="table-responsive">
+	<table class="table row-detail">
+		<thead><tr><th style="width: 15%">Attribute</th><th>Value</th></tr></thead>
+		<tbody>
+			<% for(var key in data.columnLookup) { %>
+				<tr><td><%= data.columnLookup[key] %></td><td>
+				<% if(typeof(data.rowData[key]) != "undefined") { %>
+					<%= data.rowData[key] %>
+				<% } %>
+				</td></tr>
+			<% } %>
+		</tbody>
+	</table>
+</div>

src/scripts/views/table.js

@@ -1,4 +1,5 @@
 var _ = require('underscore')
+var $ = require('jquery')
 var Card = require('./card')
 var LoaderOn = require('../util/loader').on
 var LoaderOff = require('../util/loader').off
@@ -26,6 +27,20 @@ var addDescriptionToTitle = function (column) {
   return column
 }
 
+var rowDetails = function (rowData, columns) {
+  // create columnLookup so we get column names and tooltips
+  var columnLookup = {}
+  _.each(columns, function (column) {
+    if (column.data != null) {
+      columnLookup[column.data] = column.title || column.data
+    }
+  })
+
+  var RowDetailsTemplate = require('../templates/row-details.html')
+  var templateMarkup = RowDetailsTemplate({columnLookup: columnLookup, rowData: rowData})
+  return templateMarkup
+}
+
 module.exports = Card.extend({
   initialize: function (options) {
     Card.prototype.initialize.apply(this, arguments)
@@ -56,6 +71,16 @@ module.exports = Card.extend({
 
         columns = columns.map(addDescriptionToTitle)
 
+        if (this.config.rowDetails) {
+          // Add row detail control column
+          columns.unshift({
+            class: 'row-detail-control fa fa-plus-square-o',
+            orderable: false,
+            data: null,
+            defaultContent: ''
+          })
+        }
+
         // Initialize the table
         var container = this.$('.card-content table')
         this.table = container.DataTable({
@@ -66,6 +91,28 @@ module.exports = Card.extend({
           ajax: _.bind(this.dataTablesAjax, this)
         })
 
+        if (this.config.rowDetails) {
+          // store this.table as table, which is used in the following callback
+          var table = this.table
+          // listen for row detail icon click and act apropriately
+          container.on('click', 'tr td.row-detail-control', function () {
+            var clicked = $(this)
+            var tr = clicked.closest('tr')
+            var row = table.row(tr)
+            if (row.child.isShown()) {
+              clicked.removeClass('fa-minus-square-o')
+              clicked.addClass('fa-plus-square-o')
+              tr.removeClass('details')
+              row.child.hide()
+            } else {
+              clicked.addClass('fa-minus-square-o')
+              clicked.removeClass('fa-plus-square-o')
+              tr.addClass('details')
+              row.child(rowDetails(row.data(), columns)).show()
+            }
+          })
+        }
+
         this.activateTooltips(container)
       }, this))
     }

src/styles/main.css

@@ -49,6 +49,15 @@ body {
 	white-space: nowrap;
 }
 
+.card-content .dataTables_scrollBody table thead .row-detail-control {
+    visibility: hidden;
+}
+
+.card-content table.row-detail{
+	margin-left: 40px;
+	width: inherit;
+}
+
 /*.callout .card-content {
 	min-height: 0;
 }*/