fixed rowHeader

src/ui/table.js

 /**
- * @param options.$el
- * @param options.items
- * @param options.columns
+ * @param options.$el The jQuery element to render to. Must be in the DOM.
+ * @param options.items An array of items to display in the table
+ * @param options.search Whether to create a search widget
+ * @param options.rowHeader Renderer to call for each row in the table
+ * @param options.rowHeight Table row height
+ * @param height: Height in pixels of table. '564px',
+ * @param options.collapseBreakpoint: 500
+ * @param options.showHeader: true
+ * @param options.select: true
+ * @param options.responsive: true
+ * @param options.fixedWidth: Fixed table with when responsive is false. '320px'
+ * @param options.columns An array of column descriptors. Each column can have the properties:
+ * visible, name, field, renderer
  */
-morpheus.Table = function (options) {
+
+items: [],
+
+	morpheus.Table = function (options) {
 		options = morpheus.Table.createOptions(options);
 		this.options = options;
 		if (!options.width) {
 			options.width = options.$el.attr('class');
 		}
 		var _this = this;
-	// var viewports = [ 'xs', 'sm', 'md', 'lg' ];
-	// var widthTokens = options.width != null ? options.width.split(' ') : [];
-	// var spec = {};
-	// var widthFound = false;
-	// widthTokens.forEach(function(t) {
-	// if (t.indexOf('col-') === 0) {
-	// var viewport = t.substring(4, 6);
-	// var fraction = parseFloat(t.substring(7));
-	// if (!isNaN(fraction)) {
-	// spec[viewport] = fraction;
-	// widthFound = true;
-	// }
-	// }
-	// });
 
 		var height = options.height;
 		var $gridDiv = $('<div class="slick-table'
@@ -123,7 +122,8 @@ morpheus.Table = function (options) {
 				&& visibleColumns.length > 1) {
 				collapsed = true;
 				$gridDiv.addClass('slick-stacked');
-			_this.grid.grid.getOptions().rowHeight = options.rowHeight
+
+				_this.grid.grid.getOptions().rowHeight = (options.collapsedRowHeight ? options.collapsedRowHeight : options.rowHeight)
 					* visibleColumns.length;
 				// collapse
 				_this.grid.grid
@@ -151,22 +151,19 @@ morpheus.Table = function (options) {
 						.push('<div class="slick-table-wrapper"><div class="slick-cell-wrapper">');
 						if (options.rowHeader) { // e.g. render checkbox
 							html.push(options.rowHeader(dataContext));
+							html.push('<div style="height:4px;"></div>');
 						}
 						for (var i = 0; i < visibleColumns.length; i++) {
-						if (i === 0) {
-							html
-							.push('<div style="font-weight:600;display:'
-								+ (options.rowHeader ? 'inline-block'
-									: 'block') + '">');
-						} else {
-							html.push('<div>');
+							if (i > 0) {
+								html.push('<div style="height:4px;"></div>');
 							}
-
 							var c = visibleColumns[i];
+							html.push(c.name);
+							html.push(':');
 							var s = c.renderer(dataContext, c
 							.getter(dataContext));
 							html.push(s);
-						html.push('</div>');
+
 						}
 						html.push('</div></div>');
 						return html.join('');
@@ -213,7 +210,7 @@ morpheus.Table = function (options) {
 			this.setItems(options.items);
 		}
 
-};
+	};
 
 morpheus.Table.defaultRenderer = function (item, value) {
 	if (_.isNumber(value)) {
@@ -552,7 +549,15 @@ morpheus.Table.createOptions = function (options) {
 				return morpheus.Table.defaultRenderer(dataContext, value);
 			},
 			formatter: function (row, cell, value, columnDef, dataContext) {
-				return '<div class="slick-table-wrapper"><div class="slick-cell-wrapper">' + column.renderer(dataContext, value) + '</div></div>';
+
+				var html = [];
+				html.push('<div class="slick-table-wrapper"><div class="slick-cell-wrapper">');
+				if (options.rowHeader && cell === 0) {
+					html.push(options.rowHeader(dataContext));
+				}
+				html.push(column.renderer(dataContext, value));
+				html.push('</div></div>');
+				return html.join('');
 
 			},
 			comparator: function (a, b) {
@@ -593,14 +598,7 @@ morpheus.Table.createOptions = function (options) {
 				return item[c.field];
 			};
 		}
-		if (options.rowHeader && i === 0) {
-			column.formatter = function (row, cell, value, columnDef,
-										 dataContext) {
-				return '<div class="slick-table-wrapper"><div style="vertical-align: middle;display:' +
-					' table-cell;">' + options.rowHeader(dataContext)
-					+ column.renderer(dataContext, value) + '</div></div>';
-			};
-		}
+
 		columns.push(column);
 	});