• In v2.24.0,
  • This widget now supports extra rows and colspan cells in the header & footer (not the body). The first demo has been updated to show this enhancement.
  • Added columnSelector_mediaqueryHidden option.
• In v2.23.2, added columnSelector_updated option.
• In v2.23.0, updated methods to allow refreshing the content of the container & enchanced ability to set both auto and columns modes.
• In v2.19.0, the refreshColumnSelector method has been updated to allow passing a parameter. Pass an array of zero-based column indexes of columns to show, or any non-array to enable auto mode (if available).
• In v2.18.4, added columnSelector_cssChecked option which contains the class name added to checked inputs. This helps fix an issue in Chrome that rears it's ugly head when trying to use input:checked to change a Font Awesome icon. See this demo by TheSin which uses this option to change the checkbox style.
• In v2.17.0, a method to refresh the column selector was added.
  
  
• This widget will only work in tablesorter version 2.8+ and jQuery version 1.7+.
• This widget may not work properly if the table body contains rows with rowspan or colspan settings.
• The responsive part of this widget:
  • Uses similar parameters as those used by jQuery mobile to set column priority.
  • The column priorities range from 1 to 6, with 1 having the highest priority. As the browser window shrinks, lower priority (higher numbers) columns will be hidden first until all numbered priority columns are hidden.
  • Any named data-priority, other than the numbers 1 - 6, (e.g. "critical" or "persistent") will be treated as a column which will not be included in the column selector.
  • Note that this widget uses media queries, which will not work in IE8 and older browsers.
• The selector code uses css selectors, for optimal speed, to hide/show columns. These selectors will not work in IE8 and older browsers.
• The column button & popup is completely customizable, and in this demo it includes css that may not work properly in older versions of IE.

Column selector widget default options (added inside of tablesorter widgetOptions)

<th data-priority="critical">Rank</th>

$('table').on('columnUpdate', function(){
  // set ascending sort on first column
  $(this).trigger('sorton', [ [[0,0]] ]);
});

$('table').trigger('refreshColumnSelector');

In v2.23.0, this method was expanded to allow the refreshing of the selector content & set auto and column modes.

• Here are a few examples:

  Method	Description
  $('table').trigger('refreshColumnSelector');	Refresh current settings; mainly used to update the css used to hide/show columns
  $('table').trigger('refreshColumnSelector', [ [2,3,4] ]);	Set visible columns; turn off "auto" mode (original method).
  $('table').trigger('refreshColumnSelector', [ 'columns', [5,6] ]);	Set visible columns; turn off "auto" mode (alternative method).
  $('table').trigger('refreshColumnSelector', true);	Turn on "auto" mode (original method).
  $('table').trigger('refreshColumnSelector', [ 'auto', true ]);	Turn on "auto" mode (alternate method).
  $('table').trigger('refreshColumnSelector', [ 'auto', false ]);	Turn off "auto" mode (alternate method).
  $('table').trigger('refreshColumnSelector', [ 'auto', [2,3,4] ]);	Turn on "auto" mode & set visible columns when "auto" is off.
  $('table').trigger('refreshColumnSelector', 'selectors');	Refresh selector popup contents & maintain "auto" mode; this allows updating column priorities, column names & widget options.
  $('table').trigger('refreshColumnSelector', [ 'selectors', [5,6] ]);	Refresh selector popup contents; Set visible columns & turn off "auto" mode.
  $('table').trigger('refreshColumnSelector', [ 'selectors', true ]);	Refresh selector popup contents; Turn on "auto" mode

  The function used for this method was also split out from the event handler, so if you want you can access it directly as follows:

  var config = $('table')[0].config;
  // example: refreshColumns( config, 'selectors', [5,6] );
  $.tablesorter.columnSelector.refreshColumns( config, optionName, optionState );

• The parameter can be either an array of zero-based column indexes to toggle columns on and off:

  $('table').trigger('refreshColumnSelector', [ [2,3,4] ]);

  Note
  • Passing an array will turn "auto" mode off.
  • Make sure to wrap the array inside another array.
  • Columns marked as "critical" or "disable" will never get toggled off using this method.

• Or, set the parameter to any non-array value to turn the "auto" mode on - this only works if the columnSelector_mediaquery is set to true:

  $('table').trigger('refreshColumnSelector', true);

• Setting the data-priority to any non-numerical name (e.g. "critical" or "persistent").
• Setting the column selector widget columns option columnSelector_columns : { 0 : 'disable' }.
• The following methods, added to the header cell, in order of priority:
  • jQuery data data-columnSelector="disable".
  • metadata class="{ columnSelector : disable }" (requires the metadata plugin).
  • headers option headers : { 0 : { columnSelector: 'disable' } }.
  • header class name class="columnSelector-disable".