From bb9e39e4a00ec24aa3373f6dca0ffca321820031 Mon Sep 17 00:00:00 2001
From: Joshua Gould <jgould@broadinstitute.org>
Date: Tue, 10 May 2016 14:09:12 -0400
Subject: [PATCH] table width

---
 src/ui/checkbox_list.js |   3 +-
 src/ui/grid.js          | 198 +++++++++---------
 src/ui/table.js         | 444 ++++++++++++++++++++--------------------
 3 files changed, 331 insertions(+), 314 deletions(-)

diff --git a/src/ui/checkbox_list.js b/src/ui/checkbox_list.js
index 49e0598..abca257 100644
--- a/src/ui/checkbox_list.js
+++ b/src/ui/checkbox_list.js
@@ -38,7 +38,7 @@ morpheus.CheckBoxList = function(options) {
 	}
 	var idColumn = options.columns[0];
 	for (var i = 0; i < options.columns.length; i++) {
-		if (options.columns[i].isId) {
+		if (options.columns[i].idColumn) {
 			idColumn = options.columns[i];
 			break;
 		}
@@ -247,6 +247,7 @@ morpheus.CheckBoxList.prototype = {
 	},
 	on : function(evtStr, handler) {
 		this.table.on(evtStr, handler);
+		return this;
 	},
 	off : function(evtStr, handler) {
 		this.table.off(evtStr, handler);
diff --git a/src/ui/grid.js b/src/ui/grid.js
index 181e99c..112538a 100644
--- a/src/ui/grid.js
+++ b/src/ui/grid.js
@@ -1,4 +1,4 @@
-morpheus.Grid = function(options) {
+morpheus.Grid = function (options) {
 	this.options = options;
 	var _this = this;
 	var grid;
@@ -15,28 +15,28 @@ morpheus.Grid = function(options) {
 	}
 
 	var model = {
-		getLength : function() {
+		getLength: function () {
 			return _this.viewOrder != null ? _this.viewOrder.length
-					: _this.items.length;
+				: _this.items.length;
 		},
-		getItem : function(index) {
+		getItem: function (index) {
 			return _this.items[_this.viewOrder != null ? _this.viewOrder[index]
-					: index];
+				: index];
 		}
 	};
 	this.$el = options.$el;
 
 	var gridOptions = $.extend({}, {
-		select : true,
-		headerRowHeight : 0,
-		showHeaderRow : false,
-		multiColumnSort : true,
-		multiSelect : false,
-		topPanelHeight : 0,
-		enableTextSelectionOnCells : true,
-		forceFitColumns : true,
-		dataItemColumnValueExtractor : getItemColumnValue,
-		defaultFormatter : function(row, cell, value, columnDef, dataContext) {
+		select: true,
+		headerRowHeight: 0,
+		showHeaderRow: false,
+		multiColumnSort: true,
+		multiSelect: false,
+		topPanelHeight: 0,
+		enableTextSelectionOnCells: true,
+		forceFitColumns: true,
+		dataItemColumnValueExtractor: getItemColumnValue,
+		defaultFormatter: function (row, cell, value, columnDef, dataContext) {
 			if (_.isNumber(value)) {
 				return morpheus.Util.nf(value);
 			} else if (morpheus.Util.isArray(value)) {
@@ -59,46 +59,46 @@ morpheus.Grid = function(options) {
 	this.grid = grid;
 	grid.registerPlugin(new morpheus.AutoTooltips2());
 
-	grid.onCellChange.subscribe(function(e, args) {
+	grid.onCellChange.subscribe(function (e, args) {
 		_this.trigger('edit', args);
 	});
 
 	if (gridOptions.select) {
 		grid.setSelectionModel(new Slick.RowSelectionModel({
-			selectActiveRow : true,
-			multiSelect : gridOptions.multiSelect
+			selectActiveRow: true,
+			multiSelect: gridOptions.multiSelect
 		}));
-		grid.getSelectionModel().onSelectedRangesChanged.subscribe(function(e) {
+		grid.getSelectionModel().onSelectedRangesChanged.subscribe(function (e) {
 			var nitems = grid.getDataLength();
 			_this.trigger('selectionChanged', {
-				selectedRows : grid.getSelectedRows().filter(function(row) {
+				selectedRows: grid.getSelectedRows().filter(function (row) {
 					return row >= 0 && row <= nitems;
 				})
 			});
 		});
 	}
 
-	grid.onSort.subscribe(function(e, args) {
+	grid.onSort.subscribe(function (e, args) {
 		_this.sortCols = args.sortCols;
 		_this._updateMappings();
 		grid.invalidate();
 	});
 
-	options.$el.on('click', function(e) {
+	options.$el.on('click', function (e) {
 		var cell = grid.getCellFromEvent(e);
 		if (cell) {
 			_this.trigger('click', {
-				row : cell.row,
-				target : e.target
+				row: cell.row,
+				target: e.target
 			});
 		}
 	});
-	options.$el.on('dblclick', function(e) {
+	options.$el.on('dblclick', function (e) {
 		var cell = grid.getCellFromEvent(e);
 		if (cell) {
 			_this.trigger('dblclick', {
-				row : cell.row,
-				target : e.target
+				row: cell.row,
+				target: e.target
 			});
 		}
 	});
@@ -106,7 +106,7 @@ morpheus.Grid = function(options) {
 		var gridSortColumns = [];
 		var gridColumns = grid.getColumns();
 		var sortCols = [];
-		options.sort.forEach(function(c) {
+		options.sort.forEach(function (c) {
 			var column = null;
 			for (var i = 0; i < gridColumns.length; i++) {
 				if (gridColumns[i].name === c.name) {
@@ -116,12 +116,12 @@ morpheus.Grid = function(options) {
 			}
 			if (column != null) {
 				sortCols.push({
-					sortCol : column,
-					sortAsc : c.sortAsc
+					sortCol: column,
+					sortAsc: c.sortAsc
 				});
 				gridSortColumns.push({
-					columnId : column.id,
-					sortAsc : c.sortAsc
+					columnId: column.id,
+					sortAsc: c.sortAsc
 				});
 			} else {
 				console.log(c.name + ' not found.');
@@ -137,22 +137,22 @@ morpheus.Grid = function(options) {
 
 };
 morpheus.Grid.prototype = {
-	columnsAutosized : false,
-	setColumns : function(columns) {
+	columnsAutosized: false,
+	setColumns: function (columns) {
 		this.grid.setColumns(columns);
 		this.grid.resizeCanvas();
 		this.grid.invalidate();
 	},
-	getColumns : function() {
+	getColumns: function () {
 		return this.grid.getColumns();
 	},
-	getSelectedRows : function() {
+	getSelectedRows: function () {
 		var nitems = this.grid.getDataLength();
-		return this.grid.getSelectedRows().filter(function(row) {
+		return this.grid.getSelectedRows().filter(function (row) {
 			return row >= 0 && row <= nitems;
 		});
 	},
-	getSelectedItems : function() {
+	getSelectedItems: function () {
 		var rows = this.grid.getSelectedRows();
 		var selection = [];
 		for (var i = 0, nrows = rows.length; i < nrows; i++) {
@@ -160,7 +160,7 @@ morpheus.Grid.prototype = {
 		}
 		return selection;
 	},
-	getSelectedItem : function() {
+	getSelectedItem: function () {
 		var rows = this.grid.getSelectedRows();
 		if (rows.length === 1) {
 			return this.items[this.convertViewIndexToModel(rows[0])];
@@ -170,30 +170,30 @@ morpheus.Grid.prototype = {
 	/**
 	 * Gets the sorted, visible items
 	 */
-	getItems : function() {
+	getItems: function () {
 		var items = [];
 		for (var i = 0, length = this.getFilteredItemCount(); i < length; i++) {
 			items.push(this.items[this.convertViewIndexToModel(i)]);
 		}
 		return items;
 	},
-	getAllItemCount : function() {
+	getAllItemCount: function () {
 		return this.items.length;
 	},
-	getAllItems : function() {
+	getAllItems: function () {
 		return this.items;
 	},
-	getFilteredItemCount : function() {
+	getFilteredItemCount: function () {
 		return this.viewOrder ? this.viewOrder.length : this.items.length;
 	},
-	redraw : function() {
+	redraw: function () {
 		this.grid.invalidate();
 	},
-	redrawRows : function(rows) {
+	redrawRows: function (rows) {
 		this.grid.invalidateRows(rows);
 		this.grid.render();
 	},
-	setItems : function(items) {
+	setItems: function (items) {
 		// clear the selection
 		this.items = items;
 		if (this.grid.getSelectionModel()) {
@@ -205,26 +205,26 @@ morpheus.Grid.prototype = {
 		}
 
 	},
-	convertModelIndexToView : function(modelIndex) {
+	convertModelIndexToView: function (modelIndex) {
 		if (this.modelToView !== null) {
 			var index = this.modelToView.get(modelIndex);
 			return index !== undefined ? index : -1;
 		}
 		return modelIndex;
 	},
-	convertViewIndexToModel : function(viewIndex) {
+	convertViewIndexToModel: function (viewIndex) {
 		return this.viewOrder != null ? (viewIndex < this.viewOrder.length
-				&& viewIndex >= 0 ? this.viewOrder[viewIndex] : -1) : viewIndex;
+		&& viewIndex >= 0 ? this.viewOrder[viewIndex] : -1) : viewIndex;
 	},
-	_updateMappings : function() {
+	_updateMappings: function () {
 		var selectedViewIndices = this.grid.getSelectionModel() != null ? this.grid
-				.getSelectedRows()
-				: null;
+		.getSelectedRows()
+			: null;
 		var selectedModelIndices = [];
 		if (selectedViewIndices) {
 			for (var i = 0, length = selectedViewIndices.length; i < length; i++) {
 				selectedModelIndices.push(this
-						.convertViewIndexToModel(selectedViewIndices[i]));
+				.convertViewIndexToModel(selectedViewIndices[i]));
 			}
 		}
 		this.viewOrder = null;
@@ -247,7 +247,7 @@ morpheus.Grid.prototype = {
 			}
 			var ncols = cols.length;
 			var items = this.items;
-			this.viewOrder.sort(function(index1, index2) {
+			this.viewOrder.sort(function (index1, index2) {
 				for (var i = 0; i < ncols; i++) {
 					var getter = cols[i].sortCol.getter;
 					var sign = cols[i].sortAsc ? 1 : -1;
@@ -274,7 +274,7 @@ morpheus.Grid.prototype = {
 			var newSelectedViewIndices = [];
 			for (var i = 0, length = selectedModelIndices.length; i < length; i++) {
 				var index = this
-						.convertModelIndexToView(selectedModelIndices[i]);
+				.convertModelIndexToView(selectedModelIndices[i]);
 				if (index !== undefined) {
 					newSelectedViewIndices.push(index);
 				}
@@ -282,45 +282,49 @@ morpheus.Grid.prototype = {
 			this.grid.setSelectedRows(newSelectedViewIndices);
 		}
 	},
-	setSelectedRows : function(rows) {
+	setSelectedRows: function (rows) {
 		this.grid.setSelectedRows(rows);
 	},
-	setFilter : function(filter) {
+	setFilter: function (filter) {
 		this.filter = filter;
 		this._updateMappings();
 		this.grid.invalidate();
 		this.trigger('filter');
 	},
-	getFilter : function() {
+	getFilter: function () {
 		return this.filter;
 	},
-	autosizeColumns : function() {
-		this.columnsAutosized = true;
+	autosizeColumns: function () {
+
 		var columns = this.grid.getColumns();
 		var items = this.getItems();
+		if (!items || items.length == 0) {
+			return;
+		}
 		if (!columns || columns.length <= 1) {
 			return;
 		}
+		this.columnsAutosized = true;
 		var div = document.createElement('div');
 		document.body.appendChild(div);
 		var $d = $(div);
 
 		$d.css({
-			position : 'absolute',
-			left : -1000,
-			top : -1000
+			position: 'absolute',
+			left: -1000,
+			top: -1000
 		});
 
 		var $row = $('<div class="slick-table">'
-				+ '<div class="ui-state-default slick-header-column slick-header-sortable ui-sortable-handle"></div>'
-				+ '<div class="ui-widget-content slick-row"><div class="slick-cell selected"></div></div>'
-				+ '</div>');
+			+ '<div class="ui-state-default slick-header-column slick-header-sortable ui-sortable-handle"></div>'
+			+ '<div class="ui-widget-content slick-row"><div class="slick-cell selected"></div></div>'
+			+ '</div>');
 		var $cell = $row.find('.slick-cell');
 		var $header = $row.find('.slick-header-column');
 		$row.appendTo($d);
-		var gridWidth = this.options.$el.width();
+		var gridWidth = this.options.$el.width() - 30;
 		var maxWidth = Math.min(parseInt(gridWidth / 2), 400);
-		var getColumnWidth = function(column) {
+		var getColumnWidth = function (column) {
 			var w = $header.html(column.name).outerWidth();
 			w = Math.max($cell.outerWidth(), w);
 			if (column.prototypeValue) {
@@ -328,14 +332,17 @@ morpheus.Grid.prototype = {
 				w = Math.max($cell.outerWidth(), w);
 			} else {
 				for (var i = 0, nrows = Math.min(items.length, 10); i < nrows; i++) {
-					var text = column.formatter(i, null, column
-							.getter(items[i]), column, items[i]);
-					$cell.html(text);
+					var html = column.formatter(i, null, column
+					.getter(items[i]), column, items[i]);
+					var $html = $(html);
+					$html.find('.slick-cell-wrapper').attr('class', '');
+					$cell.html($html);
+
 					w = Math.max($cell.outerWidth(), w);
 				}
 			}
 			column.width = parseInt(Math.min(maxWidth, w));
-
+			
 		};
 		var totalWidth = 0;
 		for (var i = 0; i < columns.length; i++) {
@@ -351,10 +358,11 @@ morpheus.Grid.prototype = {
 
 		} else if (totalWidth > gridWidth) {
 			// shrink
-			columns[columns.length - 1].width -= (totalWidth - gridWidth);
+			//columns[columns.length - 1].width -= (totalWidth - gridWidth);
 			// shrink last column
 		}
 
+
 		$d.remove();
 		this.grid.resizeCanvas();
 	}
@@ -365,10 +373,10 @@ morpheus.Util.extend(morpheus.Grid, morpheus.Events);
 /**
  * AutoTooltips2 plugin to show/hide tooltips when columns are too narrow to fit
  * content.
- * 
+ *
  * @constructor
  */
-morpheus.AutoTooltips2 = function(options) {
+morpheus.AutoTooltips2 = function (options) {
 	var _grid;
 	var _self = this;
 	var tip;
@@ -406,7 +414,7 @@ morpheus.AutoTooltips2 = function(options) {
 
 	/**
 	 * Handle mouse entering grid cell to add/remove tooltip.
-	 * 
+	 *
 	 * @param {jQuery.Event}
 	 *            e - The event
 	 */
@@ -419,9 +427,10 @@ morpheus.AutoTooltips2 = function(options) {
 			}
 		}
 	}
+
 	function hideAll() {
 		$(_grid.getCanvasNode()).find('[data-original-title]').attr(
-				'data-original-title', '').tooltip('hide');
+			'data-original-title', '').tooltip('hide');
 
 	}
 
@@ -431,6 +440,7 @@ morpheus.AutoTooltips2 = function(options) {
 			$node.tooltip('hide');
 		}
 	}
+
 	function showHeaderToolTip(e) {
 		var show = false;
 		var $node = $(e.target);
@@ -440,10 +450,10 @@ morpheus.AutoTooltips2 = function(options) {
 			var $name = $node.find('.slick-column-name');
 			if (!$node.data('bs.tooltip')) {
 				$node.tooltip({
-					placement : 'auto',
-					html : true,
-					container : 'body',
-					trigger : 'manual'
+					placement: 'auto',
+					html: true,
+					container: 'body',
+					trigger: 'manual'
 				});
 			}
 			$node.attr('data-original-title', $name.text());
@@ -454,6 +464,7 @@ morpheus.AutoTooltips2 = function(options) {
 			}
 		}
 	}
+
 	function showToolTip(e) {
 		var cell = _grid.getCellFromEvent(e);
 		if (cell) {
@@ -461,8 +472,9 @@ morpheus.AutoTooltips2 = function(options) {
 			var text = '';
 			var c = _grid.getColumns()[cell.cell];
 			var show = false;
+			var $checkNode = $node.find('.slick-cell-wrapper');
 			if (c.alwaysShowTooltip
-					|| ($node[0].scrollWidth > $node[0].offsetWidth)) {
+				|| ($checkNode[0].scrollWidth > $checkNode[0].offsetWidth)) {
 				var item = _grid.getDataItem(cell.row);
 				text = c.tooltip(item, c.getter(item));
 				show = true;
@@ -471,10 +483,10 @@ morpheus.AutoTooltips2 = function(options) {
 			var hasTip = $node.data('bs.tooltip');
 			if (!hasTip) {
 				$node.tooltip({
-					placement : 'auto',
-					html : true,
-					container : 'body',
-					trigger : 'manual'
+					placement: 'auto',
+					html: true,
+					container: 'body',
+					trigger: 'manual'
 				});
 			}
 			if (show) {
@@ -487,7 +499,7 @@ morpheus.AutoTooltips2 = function(options) {
 
 	/**
 	 * Handle mouse entering header cell to add/remove tooltip.
-	 * 
+	 *
 	 * @param {jQuery.Event}
 	 *            e - The event
 	 * @param {object}
@@ -495,18 +507,18 @@ morpheus.AutoTooltips2 = function(options) {
 	 */
 	function handleHeaderMouseEnter(e, args) {
 		var column = args.column, $node = $(e.target).closest(
-				'.slick-header-column');
+			'.slick-header-column');
 		if (!column.toolTip) {
 			$node.attr('title',
-					($node.innerWidth() < $node[0].scrollWidth) ? column.name
-							: '');
+				($node.innerWidth() < $node[0].scrollWidth) ? column.name
+					: '');
 		}
 	}
 
 	// Public API
 	$.extend(this, {
-		'init' : init,
-		'destroy' : destroy
+		'init': init,
+		'destroy': destroy
 	});
 
-};
\ No newline at end of file
+};
diff --git a/src/ui/table.js b/src/ui/table.js
index 8766a64..5a64d1b 100644
--- a/src/ui/table.js
+++ b/src/ui/table.js
@@ -3,7 +3,7 @@
  * @param options.items
  * @param options.columns
  */
-morpheus.Table = function(options) {
+morpheus.Table = function (options) {
 	options = morpheus.Table.createOptions(options);
 	this.options = options;
 	if (!options.width) {
@@ -27,30 +27,29 @@ morpheus.Table = function(options) {
 
 	var height = options.height;
 	var $gridDiv = $('<div class="slick-table'
-			+ (options.tableClass ? (' ' + options.tableClass) : '')
-			+ '" style="width:' + options.fixedWidth + ';height:' + height
-			+ '"></div>');
+		+ (options.tableClass ? (' ' + options.tableClass) : '')
+		+ '" style="width:' + options.fixedWidth + ';height:' + height
+		+ '"></div>');
 
 	this.$gridDiv = $gridDiv;
 	$gridDiv.appendTo(options.$el);
 	var columns = options.columns;
 	this.columns = columns;
-	var visibleColumns = columns.filter(function(c) {
+	var visibleColumns = columns.filter(function (c) {
 		return c.visible;
 	});
 	var grid = new morpheus.Grid({
-		gridOptions : {
-			forceFitColumns : true,
-			select : options.select,
-			rowHeight : options.rowHeight,
-			autoEdit : false,
-			editable : false,
-			autoHeight : options.height === 'auto',
-			enableTextSelectionOnCells : true,
+		gridOptions: {
+			select: options.select,
+			rowHeight: options.rowHeight,
+			autoEdit: false,
+			editable: false,
+			autoHeight: options.height === 'auto',
+			enableTextSelectionOnCells: true,
 		},
-		$el : $gridDiv,
-		items : options.items,
-		columns : visibleColumns
+		$el: $gridDiv,
+		items: options.items,
+		columns: visibleColumns
 	});
 	this.grid = grid;
 	if (options.search) {
@@ -62,8 +61,8 @@ morpheus.Table = function(options) {
 	if (visibleColumns.length !== this.columns.length) {
 		var select = [];
 		select
-				.push('<select data-selected-text-format="static" title="Columns..." multiple class="form-control selectpicker show-tick pull-right">');
-		this.columns.forEach(function(c, i) {
+		.push('<select data-selected-text-format="static" title="Columns..." multiple class="form-control selectpicker show-tick pull-right">');
+		this.columns.forEach(function (c, i) {
 			select.push('<option value="' + i + '"');
 			if (c.visible) {
 				select.push(' selected');
@@ -78,18 +77,18 @@ morpheus.Table = function(options) {
 		$select.appendTo($div);
 		$div.prependTo(options.$el);
 		$select.selectpicker({
-			iconBase : 'fa',
-			tickIcon : 'fa-check',
-			style : 'btn-default btn-sm'
+			iconBase: 'fa',
+			tickIcon: 'fa-check',
+			style: 'btn-default btn-sm'
 		});
-		$select.on('change', function() {
+		$select.on('change', function () {
 			var selectedItems = $select.val();
 			var selectedItemsSet = new morpheus.Set();
-			selectedItems.forEach(function(item) {
+			selectedItems.forEach(function (item) {
 				selectedItemsSet.add(parseInt(item));
 			});
-			var visibleColumns = [];
-			_this.columns.forEach(function(c, i) {
+			visibleColumns = [];
+			_this.columns.forEach(function (c, i) {
 				if (selectedItemsSet.has(i)) {
 					visibleColumns.push(c);
 				}
@@ -102,7 +101,7 @@ morpheus.Table = function(options) {
 	}
 	var collapsed = false;
 	var lastWidth = -1;
-	var resize = function() {
+	var resize = function () {
 		if (!_this.options.responsive) {
 			return;
 		}
@@ -121,60 +120,60 @@ morpheus.Table = function(options) {
 		// (document.body.clientHeight - verticalPosition) + 'px');
 		// }
 		if (!collapsed && gridWidth < options.collapseBreakpoint
-				&& columns.length > 1) {
+			&& visibleColumns.length > 1) {
 			collapsed = true;
 			$gridDiv.addClass('slick-stacked');
 			_this.grid.grid.getOptions().rowHeight = options.rowHeight
-					* columns.length;
+				* visibleColumns.length;
 			// collapse
 			_this.grid.grid
-					.setColumns([ {
-						id : 0,
-						tooltip : function(item, value) {
-							var html = [];
-							for (var i = 0; i < columns.length; i++) {
-								var text = columns[i].tooltip(item, columns[i]
-										.getter(item));
-								if (text != null && text !== '') {
-									html.push(text);
-								}
-							}
-							return html.join('<br />');
-						},
-						collapsed : true,
-						getter : function(item) {
-							return item;
-						},
-						formatter : function(row, cell, value, columnDef,
-								dataContext) {
-							var html = [];
+			.setColumns([{
+				id: 0,
+				tooltip: function (item, value) {
+					var html = [];
+					for (var i = 0; i < visibleColumns.length; i++) {
+						var text = visibleColumns[i].tooltip(item, visibleColumns[i]
+						.getter(item));
+						if (text != null && text !== '') {
+							html.push(text);
+						}
+					}
+					return html.join('<br />');
+				},
+				collapsed: true,
+				getter: function (item) {
+					return item;
+				},
+				formatter: function (row, cell, value, columnDef,
+									 dataContext) {
+					var html = [];
+					html
+					.push('<div class="slick-table-wrapper"><div class="slick-cell-wrapper">');
+					if (options.rowHeader) { // e.g. render checkbox
+						html.push(options.rowHeader(dataContext));
+					}
+					for (var i = 0; i < visibleColumns.length; i++) {
+						if (i === 0) {
 							html
-									.push('<div style="padding-top:2px;padding:bottom:2px;"">');
-							if (options.rowHeader) { // e.g. render checkbox
-								html.push(options.rowHeader(dataContext));
-							}
-							for (var i = 0; i < columns.length; i++) {
-								if (i === 0) {
-									html
-											.push('<div style="font-weight:600;display:'
-													+ (options.rowHeader ? 'inline-block'
-															: 'block') + '">');
-								} else {
-									html.push('<div>');
-								}
-
-								var c = columns[i];
-								var s = c.renderer(dataContext, c
-										.getter(dataContext));
-								html.push(s);
-								html.push('</div>');
-							}
-							html.push('</div>');
-							return html.join('');
-						},
-						sortable : false,
-						name : ''
-					} ]);
+							.push('<div style="font-weight:600;display:'
+								+ (options.rowHeader ? 'inline-block'
+									: 'block') + '">');
+						} else {
+							html.push('<div>');
+						}
+
+						var c = visibleColumns[i];
+						var s = c.renderer(dataContext, c
+						.getter(dataContext));
+						html.push(s);
+						html.push('</div>');
+					}
+					html.push('</div></div>');
+					return html.join('');
+				},
+				sortable: false,
+				name: ''
+			}]);
 			$gridDiv.find('.slick-header').hide();
 			_this.grid.grid.resizeCanvas();
 			_this.grid.grid.invalidate();
@@ -185,11 +184,11 @@ morpheus.Table = function(options) {
 				$gridDiv.find('.slick-header').show();
 			}
 			_this.grid.grid.getOptions().rowHeight = options.rowHeight;
-			_this.grid.grid.setColumns(columns);
+			_this.grid.grid.setColumns(visibleColumns);
 			_this.grid.grid.resizeCanvas();
 			if (options.select) {
 				_this.grid.grid.setSelectedRows(_this.grid.grid
-						.getSelectedRows());
+				.getSelectedRows());
 			}
 			_this.grid.grid.invalidate();
 		} else {
@@ -203,20 +202,20 @@ morpheus.Table = function(options) {
 	}
 	if (options.responsive) {
 		$(window).on('resize orientationchange', resize);
-		$gridDiv.on('remove', function() {
+		$gridDiv.on('remove', function () {
 			$(window).off('resize', resize);
 		});
 		resize();
 	}
 	this.resize = resize;
-	if (options.columns.length > 1 && options.items != null
-			&& options.items.length > 0) {
+	if (visibleColumns.length > 1 && options.items != null
+		&& options.items.length > 0) {
 		this.setItems(options.items);
 	}
 
 };
 
-morpheus.Table.defaultRenderer = function(item, value) {
+morpheus.Table.defaultRenderer = function (item, value) {
 	if (_.isNumber(value)) {
 		return morpheus.Util.nf(value);
 	} else if (morpheus.Util.isArray(value)) {
@@ -236,7 +235,7 @@ morpheus.Table.defaultRenderer = function(item, value) {
 
 morpheus.Table.prototype = {
 
-	setHeight : function(height) {
+	setHeight: function (height) {
 		this.options.height = height;
 		if (height === 'auto') {
 			this.$gridDiv.css('height', '');
@@ -249,13 +248,13 @@ morpheus.Table.prototype = {
 		this.grid.grid.resizeCanvas();
 		if (height === 'auto') {
 			var height = this.getItems().length * this.options.rowHeight
-					+ this.options.rowHeight;
+				+ this.options.rowHeight;
 			this.$gridDiv.find('.slick-viewport').css('height', height + 'px');
 		}
 		this.grid.grid.invalidate();
 
 	},
-	setSearchVisible : function(visible) {
+	setSearchVisible: function (visible) {
 		if (this.tableSearch) {
 			if (!visible) {
 				this.tableSearch.$el.hide();
@@ -264,13 +263,13 @@ morpheus.Table.prototype = {
 			}
 		}
 	},
-	autocomplete : function(tokens, response) {
+	autocomplete: function (tokens, response) {
 		var matches = [];
 		var token = tokens != null && tokens.length > 0 ? tokens[tokens.selectionStartIndex]
-				: '';
+			: '';
 		token = $.trim(token);
-		var columns = this.columns.filter(function(c) {
-			return c.searchable;
+		var columns = this.columns.filter(function (c) {
+			return c.searchable && c.visible;
 		});
 
 		var ncolumns = columns.length;
@@ -282,19 +281,19 @@ morpheus.Table.prototype = {
 			for (var i = 0; i < ncolumns; i++) {
 				var field = columns[i].name;
 				matches.push({
-					value : field + ':',
-					label : '<span style="font-weight:300;">' + field
-							+ ':</span>',
-					show : true
+					value: field + ':',
+					label: '<span style="font-weight:300;">' + field
+					+ ':</span>',
+					show: true
 				});
 				// show column names
 
 			}
 			matches
-					.sort(function(a, b) {
-						return (a.value === b.value ? 0
-								: (a.value < b.value ? -1 : 1));
-					});
+			.sort(function (a, b) {
+				return (a.value === b.value ? 0
+					: (a.value < b.value ? -1 : 1));
+			});
 			return response(matches);
 		}
 		var field = null;
@@ -304,12 +303,12 @@ morpheus.Table.prototype = {
 			if (token.charCodeAt(semi - 1) !== 92) { // \:
 				var possibleField = $.trim(token.substring(0, semi));
 				if (possibleField.length > 0 && possibleField[0] === '"'
-						&& possibleField[token.length - 1] === '"') {
+					&& possibleField[token.length - 1] === '"') {
 					possibleField = possibleField.substring(1,
-							possibleField.length - 1);
+						possibleField.length - 1);
 				}
 				var columnNameToColumn = new morpheus.Map();
-				var columnNames = columns.map(function(c) {
+				var columnNames = columns.map(function (c) {
 					return c.name;
 				});
 				for (var i = 0; i < columnNames.length; i++) {
@@ -318,7 +317,7 @@ morpheus.Table.prototype = {
 				var c = columnNameToColumn.get(possibleField);
 				if (c !== undefined) {
 					token = $.trim(token.substring(semi + 1));
-					columns = [ c ];
+					columns = [c];
 					ncolumns = 1;
 				}
 			}
@@ -329,10 +328,10 @@ morpheus.Table.prototype = {
 				var field = columns[j].name;
 				if (regex.test(field)) {
 					matches.push({
-						value : field + ':',
-						label : '<span style="font-weight:300;">' + field
-								+ ':</span>',
-						show : true
+						value: field + ':',
+						label: '<span style="font-weight:300;">' + field
+						+ ':</span>',
+						show: true
 					});
 				}
 			}
@@ -353,17 +352,17 @@ morpheus.Table.prototype = {
 						if (regex.test(val) && !set.has(val)) {
 							set.add(val);
 							matches
-									.push({
-										value : showField ? (field + ':' + val)
-												: val,
-										label : showField ? ('<span style="font-weight:300;">'
-												+ field
-												+ ':</span>'
-												+ '<span style="font-weight:900;">'
-												+ val + '</span>')
-												: ('<span style="font-weight:900;">'
-														+ val + '</span>')
-									});
+							.push({
+								value: showField ? (field + ':' + val)
+									: val,
+								label: showField ? ('<span style="font-weight:300;">'
+								+ field
+								+ ':</span>'
+								+ '<span style="font-weight:900;">'
+								+ val + '</span>')
+									: ('<span style="font-weight:900;">'
+								+ val + '</span>')
+							});
 						}
 						if (matches.length === maxSize) {
 							return response(matches);
@@ -373,17 +372,17 @@ morpheus.Table.prototype = {
 					if (regex.test(value) && !set.has(value)) {
 						set.add(value);
 						matches
-								.push({
-									value : showField ? (field + ':' + value)
-											: value,
-									label : showField ? ('<span style="font-weight:300;">'
-											+ field
-											+ ':</span>'
-											+ '<span style="font-weight:900;">'
-											+ value + '</span>')
-											: ('<span style="font-weight:900;">'
-													+ value + '</span>')
-								});
+						.push({
+							value: showField ? (field + ':' + value)
+								: value,
+							label: showField ? ('<span style="font-weight:300;">'
+							+ field
+							+ ':</span>'
+							+ '<span style="font-weight:900;">'
+							+ value + '</span>')
+								: ('<span style="font-weight:900;">'
+							+ value + '</span>')
+						});
 						if (matches.length === maxSize) {
 							return response(matches);
 						}
@@ -395,16 +394,16 @@ morpheus.Table.prototype = {
 		return response(matches);
 
 	},
-	searchWithPredicates : function(predicates) {
+	searchWithPredicates: function (predicates) {
 		if (predicates == null || predicates.length === 0) {
 			this.grid.setFilter(null);
 			return;
 		}
-		var columns = this.columns.filter(function(c) {
-			return c.searchable;
+		var columns = this.columns.filter(function (c) {
+			return c.searchable && c.visible;
 		});
 		var columnNameToColumn = new morpheus.Map();
-		var columnNames = columns.map(function(c) {
+		var columnNames = columns.map(function (c) {
 			return c.name;
 		});
 		for (var i = 0; i < columnNames.length; i++) {
@@ -429,131 +428,134 @@ morpheus.Table.prototype = {
 		predicates = filteredPredicates;
 		npredicates = predicates.length;
 		this.grid
-				.setFilter(function(item) {
-					for (var p = 0; p < npredicates; p++) {
-						var predicate = predicates[p];
-						var searchColumns;
-						if (predicate.column) {
-							searchColumns = [ predicate.column ];
-						} else {
-							searchColumns = columns;
-						}
-						for (var j = 0, ncolumns = searchColumns.length; j < ncolumns; j++) {
-							var value = searchColumns[j].getter(item);
-							if (morpheus.Util.isArray(value)) {
-								var nvalues = value.length;
-								for (var i = 0; i < nvalues; i++) {
-									if (predicate.accept(value[i])) {
-										return true;
-									}
-								}
-							} else {
-								var predicate = predicates[p];
-								if (predicate.accept(value)) {
-									return true;
-								}
+		.setFilter(function (item) {
+			for (var p = 0; p < npredicates; p++) {
+				var predicate = predicates[p];
+				var searchColumns;
+				if (predicate.column) {
+					searchColumns = [predicate.column];
+				} else {
+					searchColumns = columns;
+				}
+				for (var j = 0, ncolumns = searchColumns.length; j < ncolumns; j++) {
+					var value = searchColumns[j].getter(item);
+					if (morpheus.Util.isArray(value)) {
+						var nvalues = value.length;
+						for (var i = 0; i < nvalues; i++) {
+							if (predicate.accept(value[i])) {
+								return true;
 							}
 						}
-
+					} else {
+						var predicate = predicates[p];
+						if (predicate.accept(value)) {
+							return true;
+						}
 					}
+				}
 
-					return false;
-				});
+			}
+
+			return false;
+		});
 
 	},
-	search : function(text) {
+	search: function (text) {
 		if (text === '') {
 			this.grid.setFilter(null);
 		} else {
 			var tokens = morpheus.Util.getAutocompleteTokens(text);
-			var columns = this.columns.filter(function(c) {
-				return c.searchable;
+			var columns = this.columns.filter(function (c) {
+				return c.searchable && c.visible;
 			});
-			var columnNames = columns.map(function(c) {
+			var columnNames = columns.map(function (c) {
 				return c.name;
 			});
 			var predicates = morpheus.Util.createSearchPredicates({
-				tokens : tokens,
-				fields : columnNames
+				tokens: tokens,
+				fields: columnNames
 			});
 			this.searchWithPredicates(predicates);
 		}
 	},
-	getSelectedRows : function() {
+	getSelectedRows: function () {
 		return this.grid.getSelectedRows();
 	},
-	getSelectedItems : function() {
+	getSelectedItems: function () {
 		return this.grid.getSelectedItems();
 	},
-	getSelectedItem : function() {
+	getSelectedItem: function () {
 		return this.grid.getSelectedItem();
 	},
-	setSelectedRows : function(rows) {
+	setSelectedRows: function (rows) {
 		this.grid.setSelectedRows(rows);
 	},
-	getItems : function(items) {
+	getItems: function (items) {
 		return this.grid.getItems();
 	},
-	getAllItemCount : function() {
+	getAllItemCount: function () {
 		return this.grid.getAllItemCount();
 	},
-	getFilteredItemCount : function() {
+	getFilteredItemCount: function () {
 		return this.grid.getFilteredItemCount();
 	},
-	setFilter : function(f) {
+	setFilter: function (f) {
 		this.grid.setFilter(f);
 	},
-	setItems : function(items) {
+	setItems: function (items) {
 		this.grid.setItems(items);
 		this.grid.redraw();
 		// TODO update height?
 	},
-	redraw : function() {
+	redraw: function () {
 		this.grid.redraw();
 	},
 	/**
 	 * @param evtStr
 	 *            selectionChanged
 	 */
-	on : function(evtStr, handler) {
+	on: function (evtStr, handler) {
 		this.grid.on(evtStr, handler);
+		return this;
 	},
-	off : function(evtStr, handler) {
+	off: function (evtStr, handler) {
 		this.grid.off(evtStr, handler);
+		return this;
 	},
-	trigger : function(evtStr) {
+	trigger: function (evtStr) {
 		this.grid.trigger(evtStr);
 	}
 };
 
-morpheus.Table.createOptions = function(options) {
+morpheus.Table.createOptions = function (options) {
 	options = $.extend(true, {}, {
-		items : [],
-		height : '564px',
-		collapseBreakpoint : 500,
-		showHeader : true,
-		select : true,
-		rowHeader : null,
-		responsive : true,
-		fixedWidth : '320px'
+		items: [],
+		height: '564px',
+		collapseBreakpoint: 500,
+		showHeader: true,
+		select: true,
+		rowHeader: null,
+		responsive: true,
+		fixedWidth: '320px'
 	}, options);
 
 	if (!options.columns) {
-		options.columns = [ {
-			name : ''
-		} ];
+		options.columns = [{
+			name: ''
+		}];
 	}
 	var columns = [];
-	options.columns.forEach(function(c, i) {
+	options.columns.forEach(function (c, i) {
 		var column = $.extend(true, {}, {
-			id : i,
-			tooltip : function(dataContext, value) {
+			id: i,
+			tooltip: function (dataContext, value) {
 				return morpheus.Table.defaultRenderer(dataContext, value);
 			},
-			formatter : function(row, cell, value, columnDef, dataContext) {
-				return column.renderer(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>';
+
 			},
-			comparator : function(a, b) {
+			comparator: function (a, b) {
 				var aNaN = (a == null || _.isNumber(a) && isNaN(a));
 				var bNaN = (b == null || _.isNumber(b) && isNaN(b));
 				if (aNaN && bNaN) {
@@ -574,28 +576,29 @@ morpheus.Table.createOptions = function(options) {
 
 				return (a === b ? 0 : (a < b ? -1 : 1));
 			},
-			sortable : true,
-			searchable : true,
-			width : null,
-			name : c.name,
-			renderer : morpheus.Table.defaultRenderer
+			sortable: true,
+			searchable: true,
+			width: null,
+			name: c.name,
+			renderer: morpheus.Table.defaultRenderer
 		}, c);
 
 		if (column.visible === undefined) {
 			column.visible = true;
 		}
 		if (!column.getter) {
-			column.getter = column.field == null ? function(item) {
+			column.getter = column.field == null ? function (item) {
 				return item;
-			} : function(item) {
+			} : function (item) {
 				return item[c.field];
 			};
 		}
 		if (options.rowHeader && i === 0) {
-			column.formatter = function(row, cell, value, columnDef,
-					dataContext) {
-				return options.rowHeader(dataContext)
-						+ column.renderer(dataContext, value);
+			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);
@@ -605,25 +608,26 @@ morpheus.Table.createOptions = function(options) {
 	if (options.columns.length === 1) {
 		options.tableClass = 'slick-table-compact';
 	} else {
-		options.tableClass = 'slick-striped-table';// 'slick-bordered-table';
+		options.tableClass = 'slick-bordered-table';
 	}
 	if (!options.rowHeight) {
-		options.rowHeight = options.tableClass === 'slick-table-compact' ? 18
-				: 20;
+		// options.rowHeight = options.tableClass === 'slick-table-compact' ? 18
+		// 	: 20;
+		options.rowHeight = 20;
 	}
 	return options;
 };
 
-morpheus.TableSearchUI = function() {
+morpheus.TableSearchUI = function () {
 	var _this = this;
 	var html = [];
 	html.push('<div name="searchDiv">');
 	html.push('<form class="form">');
 	html
-			.push('<div class="form-group" style="max-width:525px; width:95%; margin:0px;">');
+	.push('<div class="form-group" style="max-width:525px; width:95%; margin:0px;">');
 
 	html
-			.push('<input name="search" type="text" class="form-control input-sm" placeholder="Search" autocomplete="off"></input>');
+	.push('<input name="search" type="text" class="form-control input-sm" placeholder="Search" autocomplete="off"></input>');
 
 	html.push('<h6 name="searchResults" style="margin:0px;"></h6>');
 	html.push('</div>');
@@ -631,7 +635,7 @@ morpheus.TableSearchUI = function() {
 	html.push('</div>');
 	var $el = $(html.join(''));
 	this.$el = $el;
-	$el.find('form').on('submit', function(e) {
+	$el.find('form').on('submit', function (e) {
 		e.preventDefault();
 	});
 
@@ -639,41 +643,41 @@ morpheus.TableSearchUI = function() {
 	var $searchResults = $el.find('[name=searchResults]');
 	this.$searchResults = $searchResults;
 
-	$search.on('keyup', _.debounce(function() {
+	$search.on('keyup', _.debounce(function () {
 		_this.table.search($.trim($(this).val()));
 	}, 100));
 	morpheus.Util.autosuggest({
-		$el : $search,
-		suggestWhenEmpty : true,
-		filter : function(tokens, response) {
+		$el: $search,
+		suggestWhenEmpty: true,
+		filter: function (tokens, response) {
 			_this.table.autocomplete(tokens, response);
 		},
-		select : function() {
+		select: function () {
 			_this.table.search($.trim($search.val()));
 		}
 	});
 };
 
 morpheus.TableSearchUI.prototype = {
-	updateSearchLabel : function() {
+	updateSearchLabel: function () {
 		var filteredCount = this.table.getFilteredItemCount();
 		var text = '';
 		if (filteredCount !== this.table.getAllItemCount()) {
 			text += morpheus.Util.intFormat(filteredCount) + ' match'
-					+ (filteredCount !== 1 ? 'es' : '');
+				+ (filteredCount !== 1 ? 'es' : '');
 		}
 		this.$searchResults.html(text);
 	},
-	setTable : function(table) {
+	setTable: function (table) {
 		this.table = table;
 		var _this = this;
 		if (!table.options.responsive) {
 			this.$el.css('width', table.options.fixedWidth);
 		}
-		table.on('filter', function() {
+		table.on('filter', function () {
 			_this.updateSearchLabel();
 		});
 
 	}
 
-};
\ No newline at end of file
+};
-- 
GitLab