• This setting is optional. If not set, you can use the following function to attach it to another element - see the Bootstrap example below

  $.tablesorter.columnSelector.attachTo( $('table'), '.selector-target' );

• This can be either a jQuery selector string ( e.g. '#columnSelector' )
• or, a jQuery object ( e.g. $('#columnSelector') ).

Default value: null

• To disable, or remove a column from the column selector, include the key word "disable" - this is one of many ways to remove a column from the column selector popup
• Set a column status to true to initially display a column. This is the default for undefined columns.
• Set a column status to false to initially hide a column.
• Examples:

  widgetOptions : {
    columnSelector_columns : {
      0 : "disable", /* disable; i.e. remove column from selector */
      1 : false,     /* start with column hidden */
      2 : true,      /* start with column visible; default for undefined columns */
    }
  }

• *NOTE* Prior to v2.15.6, using these extra methods and setting a column to "false" would remove it from the selector. Now, it is more consistent with this columns option - set the appropriate method to "disable" to remove a column, "false" to initially hide a column and "true" to keep the column in an initially visible state.
  
  In v2.15.6, the following methods in order of priority are now available (set to true, false or disable):
  • jQuery data data-columnSelector="true" or data-columnSelector="false".
  • metadata class="{ columnSelector : true }" or class="{ columnSelector : false }".
  • headers option headers : { 0 : { columnSelector: true } } or headers : { 0 : { columnSelector: false } }.
  • header class name class="columnSelector-true" or class="columnSelector-false".

*NOTE* Setting a column to initially be visible (true) or invisible (false) will be overridden by the users saved selections if the columnSelector_saveColumns option is true.

NOTE If only using this widget to hide columns, set the columnSelector_mediaquery option to false. Otherwise, you'll also need to set a data-priority in each column header.

Default value: {}; empty object

This option requires the storage utility contained within the tablesorter widgets file (jquery.tablesorter.widgets.js).

Default value: true

The only available parameter is the {name} string which will be replaced with the appropriate column name/title.

An <input type="checkbox"> is required within this setting! The label element is optional.

Default value: '<label><input type="checkbox">{name}</label>'

This callback contains three parameters:

• $cell - jQuery object pointing to the header cell inner wrapper. If the headerTemplate option is set as an empty string, then the inner wrapper is not included, and the $cell would then point to the table cell (th or td depending on the markup).
• name - This parameter contains the header cell title string. This value is obtained from the header cell data-selector-name attribute, if defined, or the header cell text.
• index - The current column index as a number value.

$(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;
      }
    }
  });
});

Default value: null

• If the header cell does not have this attribute defined, the column selector name will be taken from the header cell internal text.
• If defined, the text contained within this attribute will replace the {name} string within the layout option above.

Default value: 'data-selector-name'

When true, an "auto" checkbox is included along with the column checkboxes:

• When the "auto" checkbox is checked, all column checkboxes are disabled and media queries are active (columns will hide or show based on the browser width).
• If "auto" is unchecked, media queries are disabled and column (non-critial/not disabled) visibility is based on the column checkbox setting.

Note When set to true, this option requires the data-priority attributes (name set by the columnSelector_priority option) be set in each header column

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

See columnSelector_priority for more details.

Default value: true

Set as "Auto" to signify to the user that columns disappearing and/or reappearing is automatically done.

Default value: 'Auto: '

Default value: true

• With this option set to true, the hidden state of a column can be set using any of the following methods, added to the header cell, in order of priority:
  • jQuery data data-columnSelector="false".
  • metadata class="{ columnSelector : false }" (requires the metadata plugin).
  • headers option headers : { 0 : { columnSelector: 'false' } }.
  • header class name class="columnSelector-false".

See issue #964 for more details.

Default value: false

Note

• The initial state is not limited by this option. If you have a maximum number set and no columns hidden by class (columnSelector-false or by columnSelector_columns option, then all columns will be visible!
• The setting does not take into account the disabled columns (columns not listed in the column selector).
• So, in the first example below, the "Name" and "Major" columns are disabled (not included in the popup).
• If this option was set to 2, only two additional columns, not counting the "Name" and "Major" columns can be made visible.

Set this value to null to disable it.

Default value: null

Note

• The initial state is not limited by this option. If you have all columns hidden initially, then all columns will be hidden!
• The setting does not take into account the disabled columns (columns not listed in the column selector).
• So, in the first example below, the "Name" and "Major" columns are disabled (not included in the popup).
• If this option was set to 1, then one of the columns, not including the "Name" & "Major" columns, must always be visible.

Set this value to null to disable it.

Default value: null

• For example,
  • The last entry "70em" (1,120px) is assigned to data-priority 6.
  • When the browser width is below this dimension, all columns with a data-priority of six will be hidden.
  • Then when a browser width less than "60em" (960px) is reached, all columns of data-priority 5 and above will be hidden.
  • At "50em" (800px), all columns of data-priority 4 and above are hidden, etc.
  
  
• Adjust these values as desired, but a maximum number data-priorities is set by the columnSelector_maxPriorities value (v2.25.9).

Default value: [ "20em", "30em", "40em", "50em", "60em", "70em" ]

• If for some reason you need to change the number of priorities (especially increase the number), then change this setting to reflect the maximum number of available priorities.
• Then make sure to modify the columnSelector_breakpoints to match this new value.

Default value: 6

• Values of 1 through 6 set the breakpoints of that particular column.
• A value of 1 has the highest priority, meaning it is the last column(s) to be hidden when the browser width goes below "20em" (320px).
• A value of 7 has the lowest priority, meaning it is the first column(s) to be hidden when the browser width goes below "70em" (1,120px).
• Any named priority value, (e.g. "critical" or "persistent") will flag the widget to remove that column from the selector list.
• Undefined priorities will default to a priority value of 1.

Default value: 'data-priority'

This was added because we found an issue in the latest version of Chrome where the css selector input:checked was not correctly modifying the displayed Font Awesome replacement icon when the checkbox was toggled.

Use input.checked (or whatever value setting this class name option contains to get around this issue). See this demo by TheSin which uses this option to change the checkbox style.

Default value: 'checked'

This was added to allow customizing the css name in case of conflicts.

The grouping widget accesses this value to ensure that group rows are not hidden when the first column is toggled.

Default value: 'hasSpan'

Bind to this event if you to need to perform an action after the columnSelector has finished hiding or showing columns.

Use it as follows

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

Default value: 'columnUpdate'