table width

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);

src/ui/grid.js

-morpheus.Grid = function(options) {
+morpheus.Grid = function (options) {
 	this.options = options;
 	var _this = this;
 	var grid;
@@ -15,11 +15,11 @@ morpheus.Grid = function(options) {
 	}
 
 	var model = {
-		getLength : function() {
+		getLength: function () {
 			return _this.viewOrder != null ? _this.viewOrder.length
 				: _this.items.length;
 		},
-		getItem : function(index) {
+		getItem: function (index) {
 			return _this.items[_this.viewOrder != null ? _this.viewOrder[index]
 				: index];
 		}
@@ -27,16 +27,16 @@ morpheus.Grid = function(options) {
 	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,18 +205,18 @@ 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;
 	},
-	_updateMappings : function() {
+	_updateMappings: function () {
 		var selectedViewIndices = this.grid.getSelectionModel() != null ? this.grid
 		.getSelectedRows()
 			: 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;
@@ -282,33 +282,37 @@ 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">'
@@ -318,9 +322,9 @@ morpheus.Grid.prototype = {
 		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,9 +332,12 @@ 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
+					var html = column.formatter(i, null, column
 					.getter(items[i]), column, items[i]);
-					$cell.html(text);
+					var $html = $(html);
+					$html.find('.slick-cell-wrapper').attr('class', '');
+					$cell.html($html);
+
 					w = Math.max($cell.outerWidth(), w);
 				}
 			}
@@ -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();
 	}
@@ -368,7 +376,7 @@ morpheus.Util.extend(morpheus.Grid, morpheus.Events);
  *
  * @constructor
  */
-morpheus.AutoTooltips2 = function(options) {
+morpheus.AutoTooltips2 = function (options) {
 	var _grid;
 	var _self = this;
 	var tip;
@@ -419,6 +427,7 @@ morpheus.AutoTooltips2 = function(options) {
 			}
 		}
 	}
+
 	function hideAll() {
 		$(_grid.getCanvasNode()).find('[data-original-title]').attr(
 			'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) {
@@ -505,8 +517,8 @@ morpheus.AutoTooltips2 = function(options) {
 
 	// Public API
 	$.extend(this, {
-		'init' : init,
-		'destroy' : destroy
+		'init': init,
+		'destroy': destroy
 	});
 
 };

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) {
@@ -35,22 +35,21 @@ morpheus.Table = function(options) {
 	$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) {
@@ -63,7 +62,7 @@ morpheus.Table = function(options) {
 		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) {
+		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,19 +120,19 @@ 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) {
+			.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]
+					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);
@@ -141,19 +140,19 @@ morpheus.Table = function(options) {
 					}
 					return html.join('<br />');
 				},
-						collapsed : true,
-						getter : function(item) {
+				collapsed: true,
+				getter: function (item) {
 					return item;
 				},
-						formatter : function(row, cell, value, columnDef,
+				formatter: function (row, cell, value, columnDef,
 									 dataContext) {
 					var html = [];
 					html
-									.push('<div style="padding-top:2px;padding:bottom:2px;"">');
+					.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 < columns.length; i++) {
+					for (var i = 0; i < visibleColumns.length; i++) {
 						if (i === 0) {
 							html
 							.push('<div style="font-weight:600;display:'
@@ -163,18 +162,18 @@ morpheus.Table = function(options) {
 							html.push('<div>');
 						}
 
-								var c = columns[i];
+						var c = visibleColumns[i];
 						var s = c.renderer(dataContext, c
 						.getter(dataContext));
 						html.push(s);
 						html.push('</div>');
 					}
-							html.push('</div>');
+					html.push('</div></div>');
 					return html.join('');
 				},
-						sortable : false,
-						name : ''
-					} ]);
+				sortable: false,
+				name: ''
+			}]);
 			$gridDiv.find('.slick-header').hide();
 			_this.grid.grid.resizeCanvas();
 			_this.grid.grid.invalidate();
@@ -185,7 +184,7 @@ 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
@@ -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
+	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', '');
@@ -255,7 +254,7 @@ morpheus.Table.prototype = {
 		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,16 +281,16 @@ 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
+					value: field + ':',
+					label: '<span style="font-weight:300;">' + field
 					+ ':</span>',
-					show : true
+					show: true
 				});
 				// show column names
 
 			}
 			matches
-					.sort(function(a, b) {
+			.sort(function (a, b) {
 				return (a.value === b.value ? 0
 					: (a.value < b.value ? -1 : 1));
 			});
@@ -309,7 +308,7 @@ morpheus.Table.prototype = {
 						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
+						value: field + ':',
+						label: '<span style="font-weight:300;">' + field
 						+ ':</span>',
-						show : true
+						show: true
 					});
 				}
 			}
@@ -354,9 +353,9 @@ morpheus.Table.prototype = {
 							set.add(val);
 							matches
 							.push({
-										value : showField ? (field + ':' + val)
+								value: showField ? (field + ':' + val)
 									: val,
-										label : showField ? ('<span style="font-weight:300;">'
+								label: showField ? ('<span style="font-weight:300;">'
 								+ field
 								+ ':</span>'
 								+ '<span style="font-weight:900;">'
@@ -374,9 +373,9 @@ morpheus.Table.prototype = {
 						set.add(value);
 						matches
 						.push({
-									value : showField ? (field + ':' + value)
+							value: showField ? (field + ':' + value)
 								: value,
-									label : showField ? ('<span style="font-weight:300;">'
+							label: showField ? ('<span style="font-weight:300;">'
 							+ field
 							+ ':</span>'
 							+ '<span style="font-weight:900;">'
@@ -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,12 +428,12 @@ morpheus.Table.prototype = {
 		predicates = filteredPredicates;
 		npredicates = predicates.length;
 		this.grid
-				.setFilter(function(item) {
+		.setFilter(function (item) {
 			for (var p = 0; p < npredicates; p++) {
 				var predicate = predicates[p];
 				var searchColumns;
 				if (predicate.column) {
-							searchColumns = [ predicate.column ];
+					searchColumns = [predicate.column];
 				} else {
 					searchColumns = columns;
 				}
@@ -461,99 +460,102 @@ morpheus.Table.prototype = {
 		});
 
 	},
-	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,
+			column.formatter = function (row, cell, value, columnDef,
 										 dataContext) {
-				return options.rowHeader(dataContext)
-						+ column.renderer(dataContext, value);
+				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,16 +608,17 @@ 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">');
@@ -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,23 +643,23 @@ 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()) {
@@ -664,13 +668,13 @@ morpheus.TableSearchUI.prototype = {
 		}
 		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();
 		});