Merge branch 'master' into gh-pages

2024-11-15 23:54:22 +00:00 · 2016-12-15 15:45:20 -06:00 · 2016-12-15 15:45:20 -06:00 · b5af71afac
commit b5af71afac
parent f032f4aa22 d2fedb97fb
27 changed files with 780 additions and 62 deletions
--- a/Gruntfile.js
+++ b/Gruntfile.js
@ -149,6 +149,12 @@ module.exports = function( grunt ) {
 				src:  'css/*.less',
 				dest: 'dist/css/less/'
 			},
+			scss: {
+				expand: true,
+				flatten: true,
+				src:  'css/*.scss',
+				dest: 'dist/css/scss/'
+			},
 			images: {
 				expand: true,
 				flatten: true,
--- a/README.md
+++ b/README.md
@ -45,7 +45,8 @@ tablesorter (FORK) is a jQuery plugin for turning a standard HTML table with THE
 * Get all files: [zip](https://github.com/Mottie/tablesorter/archive/master.zip) or [tar.gz](https://github.com/Mottie/tablesorter/archive/master.tar.gz).
 * Use [bower](https://bower.io/): `bower install jquery.tablesorter`.
 * Use [node.js](https://nodejs.org/): `npm install tablesorter`.
-* CDNJS: [https://cdnjs.com/libraries/jquery.tablesorter](https://cdnjs.com/libraries/jquery.tablesorter).
+* CDNJS: https://cdnjs.com/libraries/jquery.tablesorter
+* jsDelivr: http://www.jsdelivr.com/?query=tablesorter

 ### Related Projects

@ -102,6 +103,26 @@ If you would like to contribute, please...

 View the [complete change log here](https://github.com/Mottie/tablesorter/wiki/Changes).

+#### <a name="v2.28.2">Version 2.28.2</a> (12/15/2016)
+
+* ColumnSelector:
+  * Target header column attr. Fixes [issue #1238](https://github.com/Mottie/tablesorter/issues/1238).
+  * Include HTML in empty headers, then reverted. Fixes [issue #1335](https://github.com/Mottie/tablesorter/issues/1335).
+  * Add `layoutCustomizer` option. Fixes [issue #1335](https://github.com/Mottie/tablesorter/issues/1335).
+* Reorder:
+  * Add style to `<HEAD>`.
+* Resizable:
+  * Adding style in `<HEAD>` tag not at the end of file. See [pull #1337](https://github.com/Mottie/tablesorter/pull/1337); thanks [@Frennetix](https://github.com/Frennetix)!
+* Scroller:
+  * Adding style in `<HEAD>` tag not at the end of file. See [pull #1338](https://github.com/Mottie/tablesorter/pull/1338); thanks [@Frennetix](https://github.com/Frennetix)!
+  * Code cleanup. See [pull #1338](https://github.com/Mottie/tablesorter/pull/1338).
+* Theme:
+  * Convert theme.less to theme.scss. See [pull #1332](https://github.com/Mottie/tablesorter/pull/1332); thanks to [@HongPong](https://github.com/HongPong)!
+  * Fix SCSS theme & add demo. See [pull #1332](https://github.com/Mottie/tablesorter/pull/1332)
+* Meta:
+  * Add jsDelivr CDN link to readme.
+  * Add scss to dist folder.
+
 #### <a name="v2.28.1">Version 2.28.1</a> (11/27/2016)

 * Core:
@ -143,11 +164,3 @@ View the [complete change log here](https://github.com/Mottie/tablesorter/wiki/C
 * Tbodysort:
  * Add `sortTbody_lockHead` option. See [pull #1312](https://github.com/Mottie/tablesorter/pull/1312); thanks [@ChrisM-Rogers](https://github.com/ChrisM-Rogers)!
  * Add `sortTbody_lockHead` to default options.
-
-#### <a name="v2.27.8">Version 2.27.8</a> (9/28/2016)
-
-* Core: minor code cleanup.
-* Docs: remove code in duplicate example-widget-filter-custom. See [pull #1295](https://github.com/Mottie/tablesorter/pull/1295); thanks [@themilkman](https://github.com/themilkman)!
-* ColumnSelector: `updateAll` properly updates the popup. See [Stack Overflow](http://stackoverflow.com/q/39669948/145346).
-* Pager: Maintain filter focus on custom controls. Fixes [issue #1296](https://github.com/Mottie/tablesorter/issues/1296).
-* Readme: Add link to Grav CMS. See [issue #1290](https://github.com/Mottie/tablesorter/issues/1290).
--- a/beta-testing/widget-reorder.js
+++ b/beta-testing/widget-reorder.js
@ -56,7 +56,7 @@ $.tablesorter.addWidget({
 				top: r.top - clickOffset[1],
 				width: $th.outerWidth()
 			})
-			.appendTo('body')
+			.appendTo('head')
 			.find('th, td').addClass(wo.reorder_helperClass);
 			$bar = $('<div class="' + wo.reorder_helperBar + '" />')
 			.css({
@ -64,7 +64,7 @@ $.tablesorter.addWidget({
 				top : c.$table.find('thead').offset().top,
 				height : $th.closest('thead').outerHeight() + c.$table.find('tbody').height()
 			})
-			.appendTo('body');
+			.appendTo('head');
 			positionBar(e);
 			lastIndx = endIndex;
 		},
--- a/css/bootstrap.less
+++ b/css/bootstrap.less
@ -4,10 +4,11 @@ To create your own theme, modify the code below and run it through
 a LESS compiler, like this one: http://leafo.net/lessphp/editor.html
 or download less.js from http://lesscss.org/

-Test out these custom less files live
- Basic Theme : http://codepen.io/Mottie/pen/eqBbn
- Bootstrap   : http://codepen.io/Mottie/pen/Ltzpi
- Metro Style : http://codepen.io/Mottie/pen/gCslk
+Test out these customization files live
+ Basic LESS Theme : http://codepen.io/Mottie/pen/eqBbn
+ Bootstrap LESS   : http://codepen.io/Mottie/pen/Ltzpi
+ Metro LESS Style : http://codepen.io/Mottie/pen/gCslk
+ Basic SCSS       : http://codepen.io/Mottie/pen/LbXdNR

 */

--- a/css/metro.less
+++ b/css/metro.less
@ -4,10 +4,11 @@ To create your own theme, modify the code below and run it through
 a LESS compiler, like this one: http://leafo.net/lessphp/editor.html
 or download less.js from http://lesscss.org/

-Test out these custom less files live
- Basic Theme : http://codepen.io/Mottie/pen/eqBbn
- Bootstrap   : http://codepen.io/Mottie/pen/Ltzpi
- Metro Style : http://codepen.io/Mottie/pen/gCslk
+Test out these customization files live
+ Basic LESS Theme : http://codepen.io/Mottie/pen/eqBbn
+ Bootstrap LESS   : http://codepen.io/Mottie/pen/Ltzpi
+ Metro LESS Style : http://codepen.io/Mottie/pen/gCslk
+ Basic SCSS       : http://codepen.io/Mottie/pen/LbXdNR

 */

--- a/css/theme.less
+++ b/css/theme.less
@ -8,6 +8,7 @@ Test out these custom less files live
 Basic Theme : http://codepen.io/Mottie/pen/eqBbn
 Bootstrap   : http://codepen.io/Mottie/pen/Ltzpi
 Metro Style : http://codepen.io/Mottie/pen/gCslk
+ Basic SCSS  : http://codepen.io/Mottie/pen/LbXdNR

 */

--- a/css/theme.scss
+++ b/css/theme.scss
@ -0,0 +1,327 @@
+/* Tablesorter Custom SCSS Theme by Dan Feidt (https://github.com/HongPong)
+ Converted from Custom LESS Theme by Rob Garrison
+
+ To create your own theme, modify the code below and run it through
+ a SCSS compiler, like this one: http://beautifytools.com/scss-compiler.php
+ or download sass.js from https://github.com/medialize/sass.js
+
+Test out these customization files live
+ Basic LESS Theme : http://codepen.io/Mottie/pen/eqBbn
+ Bootstrap LESS   : http://codepen.io/Mottie/pen/Ltzpi
+ Metro LESS Style : http://codepen.io/Mottie/pen/gCslk
+ Basic SCSS       : http://codepen.io/Mottie/pen/LbXdNR
+
+ */
+
+/*** theme ***/
+$theme                 : tablesorter-custom;
+
+/*** fonts ***/
+$tableHeaderFont       : 11px 'trebuchet ms', verdana, arial;
+$tableBodyFont         : 11px 'trebuchet ms', verdana, arial;
+
+/*** color definitions ***/
+/* for best results, only change the hue (120),
+   leave the saturation (60%) and luminosity (75%) alone
+   pick the color from here: http://hslpicker.com/#99E699 */
+$headerBackground      : hsl(0, 60%, 75%);
+$borderAndBackground   : #cdcdcd;
+$overallBorder         : $borderAndBackground 1px solid;
+$headerTextColor       : #000;
+
+$bodyBackground        : #fff;
+$bodyTextColor         : #000;
+
+$headerAsc             : darken(adjust-hue($headerBackground, 5), 10%); /* darken($headerBackground, 10%); */
+$headerDesc            : lighten(adjust-hue($headerBackground, -5), 10%); /* desaturate($headerAsc, 5%); */
+
+$captionBackground     : #fff; /* it might be best to match the document body background color here */
+$errorBackground       : #e6bf99; /* ajax error message (added to thead) */
+
+$filterCellBackground  : #eee;
+$filterElementTextColor: #333;
+$filterElementBkgd     : #fff;
+$filterElementBorder   : 1px solid #bbb;
+$filterTransitionTime  : 0.1s;
+$filterRowHiddenHeight : 4px; /* becomes height using padding (so it's divided by 2) */
+
+$overallPadding        : 4px;
+/* 20px should be slightly wider than the icon width to avoid overlap */
+$headerPadding         : 4px 20px 4px 4px;
+
+/* url(icons/loading.gif); */
+$processingIcon        : url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=');
+
+/* zebra striping */
+@mixin allRows {
+	background-color: $bodyBackground;
+	color: $bodyTextColor;
+}
+@mixin evenRows {
+	background-color: lighten($headerBackground, 40%);
+	color: $bodyTextColor;
+}
+@mixin oddRows {
+	background-color: lighten($headerBackground, 20%);
+}
+
+/* hovered rows */
+@mixin oddHovered {
+	background-color: desaturate($headerBackground, 60%);
+	color: $bodyTextColor;
+}
+@mixin evenHovered {
+	background-color: lighten( desaturate($headerBackground, 60%), 10% );
+	color: $bodyTextColor;
+}
+
+/* Columns widget */
+$primaryOdd    : adjust-hue($headerBackground, 10); /* saturate( darken( desaturate($headerBackground, 10%), 10% ), 30%); */
+$primaryEven   : lighten( $primaryOdd, 10% );
+$secondaryOdd  : $primaryEven;
+$secondaryEven : lighten( $primaryEven, 5% );
+$tertiaryOdd   : $secondaryEven;
+$tertiaryEven  : lighten( $secondaryEven, 5% );
+
+/* Filter widget transition */
+@mixin filterWidgetTransition {
+	-webkit-transition: line-height $filterTransitionTime ease;
+	-moz-transition: line-height $filterTransitionTime ease;
+	-o-transition: line-height $filterTransitionTime ease;
+	transition: line-height $filterTransitionTime ease;
+}
+
+/*** Arrows ***/
+$arrowPosition : right 5px center;
+
+/* black */
+$unsortedBlack : url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
+$sortAscBlack  : url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
+$sortDescBlack : url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
+
+/* white */
+$unsortedWhite : url(data:image/gif;base64,R0lGODlhFQAJAIAAAP///////yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
+$sortAscWhite  : url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
+$sortDescWhite : url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
+
+/* automatically choose the correct arrow/text color */
+@function set-lightness($a, $b) {
+	@if (lightness($headerBackground) >= 50) {
+		@return $a;
+	} @else {
+		@return $b;
+	}
+}
+@mixin headerText {
+	color: set-lightness($headerTextColor, lighten($headerTextColor, 90%));
+}
+
+@mixin unsorted {
+	background-image: set-lightness($unsortedBlack, $unsortedWhite);
+}
+@mixin sortAsc {
+	background-image: set-lightness($sortAscBlack, $sortAscWhite);
+}
+@mixin sortDesc {
+	background-image: set-lightness($sortDescBlack, $sortDescWhite);
+}
+
+/* variable theme name - requires less.js 1.3+;
+   or just replace (!".#{$theme}") with the contents of $theme
+ */
+.#{$theme} {
+	font: $tableBodyFont;
+	background-color: $borderAndBackground;
+	margin: 10px 0 15px;
+	width: 100%;
+	text-align: left;
+	border-spacing: 0;
+	border: $overallBorder;
+	border-width: 1px 0 0 1px;
+
+	th, td {
+		border: $overallBorder;
+		border-width: 0 1px 1px 0;
+	}
+
+	/* style th's outside of the thead */
+	th, thead td {
+		font: $tableHeaderFont;
+		font-weight: bold;
+		background-color: $headerBackground;
+		@include headerText;
+		border-collapse: collapse;
+		padding: $overallPadding;
+	}
+
+	tbody td, tfoot th, tfoot td {
+		padding: $overallPadding;
+		vertical-align: top;
+	}
+
+	/* style header */
+	.tablesorter-header {
+		@include unsorted;
+		background-repeat: no-repeat;
+		background-position: $arrowPosition;
+		padding: $headerPadding;
+		cursor: pointer;
+	}
+
+	.tablesorter-header.sorter-false {
+		background-image: none;
+		cursor: default;
+		padding: $overallPadding;
+	}
+
+	.tablesorter-headerAsc {
+		background-color: $headerAsc;
+		@include sortAsc;
+	}
+
+	.tablesorter-headerDesc {
+		background-color: $headerDesc;
+		@include sortDesc;
+	}
+
+	/* tfoot */
+	tfoot .tablesorter-headerAsc,
+	tfoot .tablesorter-headerDesc {
+		/* remove sort arrows from footer */
+		background-image: none;
+	}
+
+	/* optional disabled input styling */
+	.disabled {
+		opacity: 0.5;
+		filter: alpha(opacity=50);
+		cursor: not-allowed;
+	}
+
+	/* body */
+	tbody {
+
+		td {
+			@include allRows;
+			padding: $overallPadding;
+			vertical-align: top;
+		}
+
+		/* Zebra Widget - row alternating colors */
+		tr.odd > td {
+			@include oddRows;
+		}
+		tr.even > td {
+			@include evenRows;
+		}
+
+	}
+
+	/* hovered row colors
+	   you'll need to add additional lines for
+	   rows with more than 2 child rows
+	*/
+	tbody > tr.hover td,
+	tbody > tr:hover td,
+	tbody > tr:hover + tr.tablesorter-childRow > td,
+	tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
+	tbody > tr.even.hover > td,
+	tbody > tr.even:hover > td,
+	tbody > tr.even:hover + tr.tablesorter-childRow > td,
+	tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
+		@include evenHovered;
+	}
+	tbody > tr.odd.hover > td,
+	tbody > tr.odd:hover > td,
+	tbody > tr.odd:hover + tr.tablesorter-childRow > td,
+	tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
+		@include oddHovered;
+	}
+
+	/* table processing indicator - indeterminate spinner */
+	.tablesorter-processing {
+		background-image: $processingIcon;
+		background-position: center center;
+		background-repeat: no-repeat;
+	}
+
+	/* Column Widget - column sort colors */
+	tr.odd td.primary {
+		background-color: $primaryOdd;
+	}
+	td.primary, tr.even td.primary {
+		background-color: $primaryEven;
+	}
+	tr.odd td.secondary {
+		background-color: $secondaryOdd;
+	}
+	td.secondary, tr.even td.secondary {
+		background-color: $secondaryEven;
+	}
+	tr.odd td.tertiary {
+		background-color: $tertiaryOdd;
+	}
+	td.tertiary, tr.even td.tertiary {
+		background-color: $tertiaryEven;
+	}
+
+	/* caption (non-theme matching) */
+	caption {
+		background-color: $captionBackground ;
+	}
+
+	/* filter widget */
+	.tablesorter-filter-row input,
+	.tablesorter-filter-row select {
+		width: 98%;
+		height: auto;
+		margin: 0;
+		padding: $overallPadding;
+		color: $filterElementTextColor;
+		background-color: $filterElementBkgd;
+		border: $filterElementBorder;
+		-webkit-box-sizing: border-box;
+		-moz-box-sizing: border-box;
+		box-sizing: border-box;
+		@include filterWidgetTransition;
+	}
+	.tablesorter-filter-row {
+		background-color: $filterCellBackground;
+	}
+	.tablesorter-filter-row td {
+		text-align: center;
+		background-color: $filterCellBackground;
+		line-height: normal;
+		text-align: center; /* center the input */
+		@include filterWidgetTransition;
+	}
+	/* hidden filter row */
+	.tablesorter-filter-row.hideme td {
+		padding: $filterRowHiddenHeight / 2;
+		margin: 0;
+		line-height: 0;
+		cursor: pointer;
+	}
+	.tablesorter-filter-row.hideme * {
+		height: 1px;
+		min-height: 0;
+		border: 0;
+		padding: 0;
+		margin: 0;
+		/* don't use visibility: hidden because it disables tabbing */
+		opacity: 0;
+		filter: alpha(opacity=0);
+	}
+	/* rows hidden by filtering (needed for child rows) */
+	.filtered {
+		display: none;
+	}
+
+	/* ajax error row */
+	.tablesorter-errorRow td {
+		text-align: center;
+		cursor: pointer;
+		background-color: $errorBackground;
+	}
+
+}
--- a/dist/css/less/bootstrap.less
+++ b/dist/css/less/bootstrap.less
@ -4,10 +4,11 @@ To create your own theme, modify the code below and run it through
 a LESS compiler, like this one: http://leafo.net/lessphp/editor.html
 or download less.js from http://lesscss.org/

-Test out these custom less files live
- Basic Theme : http://codepen.io/Mottie/pen/eqBbn
- Bootstrap   : http://codepen.io/Mottie/pen/Ltzpi
- Metro Style : http://codepen.io/Mottie/pen/gCslk
+Test out these customization files live
+ Basic LESS Theme : http://codepen.io/Mottie/pen/eqBbn
+ Bootstrap LESS   : http://codepen.io/Mottie/pen/Ltzpi
+ Metro LESS Style : http://codepen.io/Mottie/pen/gCslk
+ Basic SCSS       : http://codepen.io/Mottie/pen/LbXdNR

 */

--- a/dist/css/less/metro.less
+++ b/dist/css/less/metro.less
@ -4,10 +4,11 @@ To create your own theme, modify the code below and run it through
 a LESS compiler, like this one: http://leafo.net/lessphp/editor.html
 or download less.js from http://lesscss.org/

-Test out these custom less files live
- Basic Theme : http://codepen.io/Mottie/pen/eqBbn
- Bootstrap   : http://codepen.io/Mottie/pen/Ltzpi
- Metro Style : http://codepen.io/Mottie/pen/gCslk
+Test out these customization files live
+ Basic LESS Theme : http://codepen.io/Mottie/pen/eqBbn
+ Bootstrap LESS   : http://codepen.io/Mottie/pen/Ltzpi
+ Metro LESS Style : http://codepen.io/Mottie/pen/gCslk
+ Basic SCSS       : http://codepen.io/Mottie/pen/LbXdNR

 */

--- a/dist/css/less/theme.less
+++ b/dist/css/less/theme.less
@ -8,6 +8,7 @@ Test out these custom less files live
 Basic Theme : http://codepen.io/Mottie/pen/eqBbn
 Bootstrap   : http://codepen.io/Mottie/pen/Ltzpi
 Metro Style : http://codepen.io/Mottie/pen/gCslk
+ Basic SCSS  : http://codepen.io/Mottie/pen/LbXdNR

 */

--- a/dist/css/scss/theme.scss
+++ b/dist/css/scss/theme.scss
@ -0,0 +1,327 @@
+/* Tablesorter Custom SCSS Theme by Dan Feidt (https://github.com/HongPong)
+ Converted from Custom LESS Theme by Rob Garrison
+
+ To create your own theme, modify the code below and run it through
+ a SCSS compiler, like this one: http://beautifytools.com/scss-compiler.php
+ or download sass.js from https://github.com/medialize/sass.js
+
+Test out these customization files live
+ Basic LESS Theme : http://codepen.io/Mottie/pen/eqBbn
+ Bootstrap LESS   : http://codepen.io/Mottie/pen/Ltzpi
+ Metro LESS Style : http://codepen.io/Mottie/pen/gCslk
+ Basic SCSS       : http://codepen.io/Mottie/pen/LbXdNR
+
+ */
+
+/*** theme ***/
+$theme                 : tablesorter-custom;
+
+/*** fonts ***/
+$tableHeaderFont       : 11px 'trebuchet ms', verdana, arial;
+$tableBodyFont         : 11px 'trebuchet ms', verdana, arial;
+
+/*** color definitions ***/
+/* for best results, only change the hue (120),
+   leave the saturation (60%) and luminosity (75%) alone
+   pick the color from here: http://hslpicker.com/#99E699 */
+$headerBackground      : hsl(0, 60%, 75%);
+$borderAndBackground   : #cdcdcd;
+$overallBorder         : $borderAndBackground 1px solid;
+$headerTextColor       : #000;
+
+$bodyBackground        : #fff;
+$bodyTextColor         : #000;
+
+$headerAsc             : darken(adjust-hue($headerBackground, 5), 10%); /* darken($headerBackground, 10%); */
+$headerDesc            : lighten(adjust-hue($headerBackground, -5), 10%); /* desaturate($headerAsc, 5%); */
+
+$captionBackground     : #fff; /* it might be best to match the document body background color here */
+$errorBackground       : #e6bf99; /* ajax error message (added to thead) */
+
+$filterCellBackground  : #eee;
+$filterElementTextColor: #333;
+$filterElementBkgd     : #fff;
+$filterElementBorder   : 1px solid #bbb;
+$filterTransitionTime  : 0.1s;
+$filterRowHiddenHeight : 4px; /* becomes height using padding (so it's divided by 2) */
+
+$overallPadding        : 4px;
+/* 20px should be slightly wider than the icon width to avoid overlap */
+$headerPadding         : 4px 20px 4px 4px;
+
+/* url(icons/loading.gif); */
+$processingIcon        : url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=');
+
+/* zebra striping */
+@mixin allRows {
+	background-color: $bodyBackground;
+	color: $bodyTextColor;
+}
+@mixin evenRows {
+	background-color: lighten($headerBackground, 40%);
+	color: $bodyTextColor;
+}
+@mixin oddRows {
+	background-color: lighten($headerBackground, 20%);
+}
+
+/* hovered rows */
+@mixin oddHovered {
+	background-color: desaturate($headerBackground, 60%);
+	color: $bodyTextColor;
+}
+@mixin evenHovered {
+	background-color: lighten( desaturate($headerBackground, 60%), 10% );
+	color: $bodyTextColor;
+}
+
+/* Columns widget */
+$primaryOdd    : adjust-hue($headerBackground, 10); /* saturate( darken( desaturate($headerBackground, 10%), 10% ), 30%); */
+$primaryEven   : lighten( $primaryOdd, 10% );
+$secondaryOdd  : $primaryEven;
+$secondaryEven : lighten( $primaryEven, 5% );
+$tertiaryOdd   : $secondaryEven;
+$tertiaryEven  : lighten( $secondaryEven, 5% );
+
+/* Filter widget transition */
+@mixin filterWidgetTransition {
+	-webkit-transition: line-height $filterTransitionTime ease;
+	-moz-transition: line-height $filterTransitionTime ease;
+	-o-transition: line-height $filterTransitionTime ease;
+	transition: line-height $filterTransitionTime ease;
+}
+
+/*** Arrows ***/
+$arrowPosition : right 5px center;
+
+/* black */
+$unsortedBlack : url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
+$sortAscBlack  : url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
+$sortDescBlack : url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
+
+/* white */
+$unsortedWhite : url(data:image/gif;base64,R0lGODlhFQAJAIAAAP///////yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
+$sortAscWhite  : url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
+$sortDescWhite : url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
+
+/* automatically choose the correct arrow/text color */
+@function set-lightness($a, $b) {
+	@if (lightness($headerBackground) >= 50) {
+		@return $a;
+	} @else {
+		@return $b;
+	}
+}
+@mixin headerText {
+	color: set-lightness($headerTextColor, lighten($headerTextColor, 90%));
+}
+
+@mixin unsorted {
+	background-image: set-lightness($unsortedBlack, $unsortedWhite);
+}
+@mixin sortAsc {
+	background-image: set-lightness($sortAscBlack, $sortAscWhite);
+}
+@mixin sortDesc {
+	background-image: set-lightness($sortDescBlack, $sortDescWhite);
+}
+
+/* variable theme name - requires less.js 1.3+;
+   or just replace (!".#{$theme}") with the contents of $theme
+ */
+.#{$theme} {
+	font: $tableBodyFont;
+	background-color: $borderAndBackground;
+	margin: 10px 0 15px;
+	width: 100%;
+	text-align: left;
+	border-spacing: 0;
+	border: $overallBorder;
+	border-width: 1px 0 0 1px;
+
+	th, td {
+		border: $overallBorder;
+		border-width: 0 1px 1px 0;
+	}
+
+	/* style th's outside of the thead */
+	th, thead td {
+		font: $tableHeaderFont;
+		font-weight: bold;
+		background-color: $headerBackground;
+		@include headerText;
+		border-collapse: collapse;
+		padding: $overallPadding;
+	}
+
+	tbody td, tfoot th, tfoot td {
+		padding: $overallPadding;
+		vertical-align: top;
+	}
+
+	/* style header */
+	.tablesorter-header {
+		@include unsorted;
+		background-repeat: no-repeat;
+		background-position: $arrowPosition;
+		padding: $headerPadding;
+		cursor: pointer;
+	}
+
+	.tablesorter-header.sorter-false {
+		background-image: none;
+		cursor: default;
+		padding: $overallPadding;
+	}
+
+	.tablesorter-headerAsc {
+		background-color: $headerAsc;
+		@include sortAsc;
+	}
+
+	.tablesorter-headerDesc {
+		background-color: $headerDesc;
+		@include sortDesc;
+	}
+
+	/* tfoot */
+	tfoot .tablesorter-headerAsc,
+	tfoot .tablesorter-headerDesc {
+		/* remove sort arrows from footer */
+		background-image: none;
+	}
+
+	/* optional disabled input styling */
+	.disabled {
+		opacity: 0.5;
+		filter: alpha(opacity=50);
+		cursor: not-allowed;
+	}
+
+	/* body */
+	tbody {
+
+		td {
+			@include allRows;
+			padding: $overallPadding;
+			vertical-align: top;
+		}
+
+		/* Zebra Widget - row alternating colors */
+		tr.odd > td {
+			@include oddRows;
+		}
+		tr.even > td {
+			@include evenRows;
+		}
+
+	}
+
+	/* hovered row colors
+	   you'll need to add additional lines for
+	   rows with more than 2 child rows
+	*/
+	tbody > tr.hover td,
+	tbody > tr:hover td,
+	tbody > tr:hover + tr.tablesorter-childRow > td,
+	tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
+	tbody > tr.even.hover > td,
+	tbody > tr.even:hover > td,
+	tbody > tr.even:hover + tr.tablesorter-childRow > td,
+	tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
+		@include evenHovered;
+	}
+	tbody > tr.odd.hover > td,
+	tbody > tr.odd:hover > td,
+	tbody > tr.odd:hover + tr.tablesorter-childRow > td,
+	tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
+		@include oddHovered;
+	}
+
+	/* table processing indicator - indeterminate spinner */
+	.tablesorter-processing {
+		background-image: $processingIcon;
+		background-position: center center;
+		background-repeat: no-repeat;
+	}
+
+	/* Column Widget - column sort colors */
+	tr.odd td.primary {
+		background-color: $primaryOdd;
+	}
+	td.primary, tr.even td.primary {
+		background-color: $primaryEven;
+	}
+	tr.odd td.secondary {
+		background-color: $secondaryOdd;
+	}
+	td.secondary, tr.even td.secondary {
+		background-color: $secondaryEven;
+	}
+	tr.odd td.tertiary {
+		background-color: $tertiaryOdd;
+	}
+	td.tertiary, tr.even td.tertiary {
+		background-color: $tertiaryEven;
+	}
+
+	/* caption (non-theme matching) */
+	caption {
+		background-color: $captionBackground ;
+	}
+
+	/* filter widget */
+	.tablesorter-filter-row input,
+	.tablesorter-filter-row select {
+		width: 98%;
+		height: auto;
+		margin: 0;
+		padding: $overallPadding;
+		color: $filterElementTextColor;
+		background-color: $filterElementBkgd;
+		border: $filterElementBorder;
+		-webkit-box-sizing: border-box;
+		-moz-box-sizing: border-box;
+		box-sizing: border-box;
+		@include filterWidgetTransition;
+	}
+	.tablesorter-filter-row {
+		background-color: $filterCellBackground;
+	}
+	.tablesorter-filter-row td {
+		text-align: center;
+		background-color: $filterCellBackground;
+		line-height: normal;
+		text-align: center; /* center the input */
+		@include filterWidgetTransition;
+	}
+	/* hidden filter row */
+	.tablesorter-filter-row.hideme td {
+		padding: $filterRowHiddenHeight / 2;
+		margin: 0;
+		line-height: 0;
+		cursor: pointer;
+	}
+	.tablesorter-filter-row.hideme * {
+		height: 1px;
+		min-height: 0;
+		border: 0;
+		padding: 0;
+		margin: 0;
+		/* don't use visibility: hidden because it disables tabbing */
+		opacity: 0;
+		filter: alpha(opacity=0);
+	}
+	/* rows hidden by filtering (needed for child rows) */
+	.filtered {
+		display: none;
+	}
+
+	/* ajax error row */
+	.tablesorter-errorRow td {
+		text-align: center;
+		cursor: pointer;
+		background-color: $errorBackground;
+	}
+
+}
--- a/dist/js/jquery.tablesorter.combined.js
+++ b/dist/js/jquery.tablesorter.combined.js
@ -1,4 +1,4 @@
-/*! tablesorter (FORK) - updated 12-08-2016 (v2.28.1)*/
+/*! tablesorter (FORK) - updated 12-15-2016 (v2.28.2)*/
 /* Includes widgets ( storage,uitheme,columns,filter,stickyHeaders,resizable,saveSort ) */
 (function(factory) {
 	if (typeof define === 'function' && define.amd) {
@ -5368,7 +5368,7 @@

 })(jQuery, window);

-/*! Widget: resizable - updated 6/28/2016 (v2.26.5) */
+/*! Widget: resizable - updated 12/15/2016 (v2.28.2) */
 /*jshint browser:true, jquery:true, unused:false */
 ;(function ($, window) {
 	'use strict';
@ -5391,7 +5391,7 @@
 			'.' + ts.css.resizableHandle + ' { position: absolute; display: inline-block; width: 8px;' +
 				'top: 1px; cursor: ew-resize; z-index: 3; user-select: none; -moz-user-select: none; }' +
 			'</style>';
-		$(s).appendTo('body');
+		$('head').append(s);
 	});

 	ts.resizable = {
--- a/dist/js/jquery.tablesorter.combined.min.js
+++ b/dist/js/jquery.tablesorter.combined.min.js
--- a/dist/js/jquery.tablesorter.widgets.js
+++ b/dist/js/jquery.tablesorter.widgets.js
@ -1,4 +1,4 @@
-/*! tablesorter (FORK) - updated 12-08-2016 (v2.28.1)*/
+/*! tablesorter (FORK) - updated 12-15-2016 (v2.28.2)*/
 /* Includes widgets ( storage,uitheme,columns,filter,stickyHeaders,resizable,saveSort ) */
 (function(factory) {
 	if (typeof define === 'function' && define.amd) {
@ -2573,7 +2573,7 @@

 })(jQuery, window);

-/*! Widget: resizable - updated 6/28/2016 (v2.26.5) */
+/*! Widget: resizable - updated 12/15/2016 (v2.28.2) */
 /*jshint browser:true, jquery:true, unused:false */
 ;(function ($, window) {
 	'use strict';
@ -2596,7 +2596,7 @@
 			'.' + ts.css.resizableHandle + ' { position: absolute; display: inline-block; width: 8px;' +
 				'top: 1px; cursor: ew-resize; z-index: 3; user-select: none; -moz-user-select: none; }' +
 			'</style>';
-		$(s).appendTo('body');
+		$('head').append(s);
 	});

 	ts.resizable = {
--- a/dist/js/jquery.tablesorter.widgets.min.js
+++ b/dist/js/jquery.tablesorter.widgets.min.js
--- a/dist/js/widgets/widget-columnSelector.min.js
+++ b/dist/js/widgets/widget-columnSelector.min.js
--- a/dist/js/widgets/widget-resizable.min.js
+++ b/dist/js/widgets/widget-resizable.min.js
--- a/dist/js/widgets/widget-scroller.min.js
+++ b/dist/js/widgets/widget-scroller.min.js
--- a/docs/example-widget-column-selector.html
+++ b/docs/example-widget-column-selector.html
@ -107,6 +107,9 @@

 			// container layout
 			columnSelector_layout : '<label><input type="checkbox">{name}</label>',
+			// layout customizer callback called for each column
+			// function($cell, name, column){ return name || $cell.html(); }
+			columnSelector_layoutCustomizer : null,
 			// data attribute containing column name to use in the selector container
 			columnSelector_name  : 'data-selector-name',

@ -316,6 +319,35 @@
 						</td>
 					</tr>

+					<tr id="column-selector-layout-customizer">
+						<td><a href="#" class="permalink">columnSelector_layoutCustomizer</a></td>
+						<td>
+							This option is set as a callback function that is called during the processing of the layout for each column.
+							<div class="collapsible">
+							<br>
+							<p>This callback contains three parameters:</p>
+							<ul>
+								<li><code>$cell</code> - jQuery object pointing to the header cell inner wrapper. If the <a href="index.html#headertemplate"><code>headerTemplate</code></a> option is set as an empty string, then the inner wrapper is not included, and the <code>$cell</code> would then point to the table cell (<code>th</code> or <code>td</code> depending on the markup).</li>
+								<li><code>name</code> - This parameter contains the header cell title string. This value is obtained from the header cell <code>data-selector-name</code> attribute, if defined, or the header cell text.</li>
+								<li><code>index</code> - The current column index as a number value.</li>
+							</ul>
+							<pre class="prettyprint lang-js">$(function() {
+  $("#task").tablesorter({
+    widgets: ["columnSelector"],
+    widgetOptions: {
+      columnSelector_container: $('#columnSelector'),
+      columnSelector_layoutCustomizer: function($cell, name, index) {
+        // return the HTML for the first column only
+        return index === 0 ? $cell.html() : name;
+      }
+    }
+  });
+});</pre>
+							Default value: <code>null</code>
+							</div>
+						</td>
+					</tr>
+
 					<tr id="column-selector-name">
 						<td><a href="#" class="permalink">columnSelector_name</a></td>
 						<td>
--- a/docs/index.html
+++ b/docs/index.html
@ -440,6 +440,7 @@
 				<li><a href="http://codepen.io/Mottie/pen/eqBbn">tablesorter LESS theme</a>.</li>
 				<li><a href="http://codepen.io/Mottie/pen/Ltzpi">tablesorter Bootstrap LESS theme</a> (<span class="version">v2.16.4</span>).</li>
 				<li><a href="http://codepen.io/Mottie/pen/gCslk">tablesorter Metro LESS theme</a> (<span class="version">v2.16.4</span>).</li>
+				<li><a href="http://codepen.io/Mottie/pen/LbXdNR">tablesorter SCSS theme</a> (<span class="version">v2.28.2</span>).</li>
 			</ul>
 		</li>
 		<li>Check out the <a href="https://github.com/Mottie/tablesorter/wiki">home wiki page</a> <span class="label label-info">more demos</span>!</li>
@ -457,7 +458,7 @@

 		<li><span class="label label-info">Beta</span> <a href="example-widget-chart.html">Chart Widget</a> (<span class="version">v2.19.0</span>; <span class="version updated">v2.24.0</span>).</li>
 		<li><span class="results">&dagger;</span> <a href="example-widget-columns.html">Columns highlight widget</a> (v2.0.17).</li>
-		<li><a href="example-widget-column-selector.html">Column selector widget</a> (<span class="version">v2.15</span>; <span class="version updated">v2.27.8</span>).</li>
+		<li><a href="example-widget-column-selector.html">Column selector widget</a> (<span class="version">v2.15</span>; <span class="version updated">v2.28.2</span>).</li>
 		<li><a href="example-widget-editable.html">Content editable widget</a> (v2.9; <span class="version updated">v2.25.5</span>).</li>
 		<li><a href="example-widget-current-sort.html">Current Sort Widget</a> (<span class="version">v2.27.0</span>).</li>
 		<li><span class="label label-info">Beta</span> <a href="example-dragtable.html">Dragtable mod</a>  - (jQuery UI widget for column reordering [<a class="external" href="http://stackoverflow.com/a/27770224/145346">ref</a>]; <span class="version">v2.24.0</span>).</li>
@ -501,9 +502,9 @@
 		<li><a href="example-widget-print.html">Print widget</a> (<span class="version">v2.16.4</span>; <span class="version updated">v2.25.8</span>).</li>
 		<li><a href="example-widget-reflow.html">Reflow widget</a> (<span class="version">v2.16</span>; <span class="version updated">v2.19.0</span>).</li>
 		<li><a href="example-widgets.html">Repeat headers widget</a> (v2.0.5; <span class="version updated">v2.19.0</span>).</li>
-		<li><span class="results">&dagger;</span> <a href="example-widget-resizable.html">Resizable columns widget</a> (v2.0.23.1; <span class="version updated">v2.26.5</span>).</li>
+		<li><span class="results">&dagger;</span> <a href="example-widget-resizable.html">Resizable columns widget</a> (v2.0.23.1; <span class="version updated">v2.28.2</span>).</li>
 		<li><span class="results">&dagger;</span> <a href="example-widget-savesort.html">Save sort widget</a> (v2.0.27; <span class="version updated">v2.24.0</span>).</li>
-		<li><a href="example-widget-scroller.html">Scroller widget</a> (<span class="version">v2.9</span>; <span class="version updated">v2.27.0</span>).</li>
+		<li><a href="example-widget-scroller.html">Scroller widget</a> (<span class="version">v2.9</span>; <span class="version updated">v2.28.2</span>).</li>
 		<li><span class="label label-info">Beta</span> <a href="example-widget-sort-to-hash.html">Sort-to-hash widget</a> (<span class="version">v2.22.4</span>; <span class="version updated">v2.24.4</span>).</li>
 		<li><span class="label label-info">Beta</span> <a href="example-widget-sort-tbodies.html">Sort tbodies widget</a> (<span class="version">v2.22.2</span>; <span class="version updated">v2.28.0</span>).</li>
 		<li><a href="example-widget-static-row.html">Static row widget</a> (<span class="version">v2.16</span>; <span class="version updated">v2.24.0</span>).</li>
--- a/js/jquery.tablesorter.combined.js
+++ b/js/jquery.tablesorter.combined.js
@ -4,7 +4,7 @@
 ██  ██ ██  ██   ██  ██ ██  ██   ██     ██ ██ ██ ██  ██ ██  ██ ██ ██▀▀    ▀▀▀██
 █████▀ ▀████▀   ██  ██ ▀████▀   ██     ██ ██ ██ ▀████▀ █████▀ ██ ██     █████▀
 */
-/*! tablesorter (FORK) - updated 12-08-2016 (v2.28.1)*/
+/*! tablesorter (FORK) - updated 12-15-2016 (v2.28.2)*/
 /* Includes widgets ( storage,uitheme,columns,filter,stickyHeaders,resizable,saveSort ) */
 (function(factory) {
 	if (typeof define === 'function' && define.amd) {
@ -5374,7 +5374,7 @@

 })(jQuery, window);

-/*! Widget: resizable - updated 6/28/2016 (v2.26.5) */
+/*! Widget: resizable - updated 12/15/2016 (v2.28.2) */
 /*jshint browser:true, jquery:true, unused:false */
 ;(function ($, window) {
 	'use strict';
@ -5397,7 +5397,7 @@
 			'.' + ts.css.resizableHandle + ' { position: absolute; display: inline-block; width: 8px;' +
 				'top: 1px; cursor: ew-resize; z-index: 3; user-select: none; -moz-user-select: none; }' +
 			'</style>';
-		$(s).appendTo('body');
+		$('head').append(s);
 	});

 	ts.resizable = {
--- a/js/jquery.tablesorter.widgets.js
+++ b/js/jquery.tablesorter.widgets.js
@ -4,7 +4,7 @@
 ██  ██ ██  ██   ██  ██ ██  ██   ██     ██ ██ ██ ██  ██ ██  ██ ██ ██▀▀    ▀▀▀██
 █████▀ ▀████▀   ██  ██ ▀████▀   ██     ██ ██ ██ ▀████▀ █████▀ ██ ██     █████▀
 */
-/*! tablesorter (FORK) - updated 12-08-2016 (v2.28.1)*/
+/*! tablesorter (FORK) - updated 12-15-2016 (v2.28.2)*/
 /* Includes widgets ( storage,uitheme,columns,filter,stickyHeaders,resizable,saveSort ) */
 (function(factory) {
 	if (typeof define === 'function' && define.amd) {
@ -2579,7 +2579,7 @@

 })(jQuery, window);

-/*! Widget: resizable - updated 6/28/2016 (v2.26.5) */
+/*! Widget: resizable - updated 12/15/2016 (v2.28.2) */
 /*jshint browser:true, jquery:true, unused:false */
 ;(function ($, window) {
 	'use strict';
@ -2602,7 +2602,7 @@
 			'.' + ts.css.resizableHandle + ' { position: absolute; display: inline-block; width: 8px;' +
 				'top: 1px; cursor: ew-resize; z-index: 3; user-select: none; -moz-user-select: none; }' +
 			'</style>';
-		$(s).appendTo('body');
+		$('head').append(s);
 	});

 	ts.resizable = {
--- a/js/widgets/widget-columnSelector.js
+++ b/js/widgets/widget-columnSelector.js
@ -1,4 +1,4 @@
-/* Widget: columnSelector (responsive table widget) - updated 9/28/2016 (v2.27.8) *//*
+/* Widget: columnSelector (responsive table widget) - updated 12/15/2016 (v2.28.2) *//*
 * Requires tablesorter v2.8+ and jQuery 1.7+
 * by Justin Hallett & Rob Garrison
 */
@ -113,7 +113,7 @@
 		},

 		setupSelector: function(c, wo) {
-			var index, name, $header, priority, col, colId,
+			var index, name, $header, priority, col, colId, $el,
 				colSel = c.selector,
 				$container = colSel.$container,
 				useStorage = wo.columnSelector_saveColumns && ts.storage,
@ -149,10 +149,13 @@
 					saved[colId] : (typeof wo.columnSelector_columns[colId] !== 'undefined' && wo.columnSelector_columns[colId] !== null) ?
 					wo.columnSelector_columns[colId] : (state === 'true' || state !== 'false');
 				colSel.$column[colId] = $(this);
-
-				// set default col title
-				name = $header.attr(wo.columnSelector_name) || $header.text();
 				if ($container.length) {
+					// set default col title
+					name = $header.attr(wo.columnSelector_name) || $header.text().trim();
+					if (typeof wo.columnSelector_layoutCustomizer === "function") {
+						$el = $header.find('.' + ts.css.headerIn);
+						name = wo.columnSelector_layoutCustomizer( $el.length ? $el : $header, name, parseInt(colId, 10) );
+					}
 					colSel.$wrapper[colId] = $(wo.columnSelector_layout.replace(/\{name\}/g, name)).appendTo($container);
 					colSel.$checkbox[colId] = colSel.$wrapper[colId]
 						// input may not be wrapped within the layout template
@ -270,7 +273,7 @@
 			var array = [],
 				temp = ' col:nth-child(' + column + ')';
 			array.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
-			temp = ' tr:not(.hasSpan) th:nth-child(' + column + ')';
+			temp = ' tr:not(.hasSpan) th[data-column="' + ( column - 1 ) + '"]';
 			array.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
 			temp = ' tr:not(.hasSpan) td:nth-child(' + column + ')';
 			array.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
@ -497,6 +500,9 @@

 			// container layout
 			columnSelector_layout : '<label><input type="checkbox">{name}</label>',
+			// layout customizer callback called for each column
+			// function($cell, name, column){ return name || $cell.html(); }
+			columnSelector_layoutCustomizer : null,
 			// data attribute containing column name to use in the selector container
 			columnSelector_name : 'data-selector-name',

--- a/js/widgets/widget-resizable.js
+++ b/js/widgets/widget-resizable.js
@ -1,4 +1,4 @@
-/*! Widget: resizable - updated 6/28/2016 (v2.26.5) */
+/*! Widget: resizable - updated 12/15/2016 (v2.28.2) */
 /*jshint browser:true, jquery:true, unused:false */
 ;(function ($, window) {
 	'use strict';
@ -21,7 +21,7 @@
 			'.' + ts.css.resizableHandle + ' { position: absolute; display: inline-block; width: 8px;' +
 				'top: 1px; cursor: ew-resize; z-index: 3; user-select: none; -moz-user-select: none; }' +
 			'</style>';
-		$(s).appendTo('body');
+		$('head').append(s);
 	});

 	ts.resizable = {
--- a/js/widgets/widget-scroller.js
+++ b/js/widgets/widget-scroller.js
@ -139,7 +139,7 @@
 			'.' + tscss.scrollerWrap + ' .' + tscss.scrollerFixedPanel +
 				' { position: absolute; top: 0; bottom: 0; z-index: 2; left: 0; right: 0; } ' +
 			'</style>';
-		$( style ).appendTo( 'body' );
+		$( 'head' ).append( style );
 	});

 	ts.scroller = {
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "tablesorter",
  "title": "tablesorter",
-  "version": "2.28.1",
+  "version": "2.28.2",
  "description": "tablesorter (FORK) is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.",
  "author": {
    "name": "Christian Bach",
--- a/tablesorter.jquery.json
+++ b/tablesorter.jquery.json
@ -1,7 +1,7 @@
 {
  "name": "tablesorter",
  "title": "tablesorter",
-  "version": "2.28.1",
+  "version": "2.28.2",
  "description": "tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.\n\nThis forked version adds lots of new enhancements including: alphanumeric sorting, pager callback functons, multiple widgets providing column styling, ui theme application, sticky headers, column filters and resizer, as well as extended documentation with a lot more demos.",
  "author": {
    "name": "Christian Bach",