• This widget will only work in tablesorter version 2.8+ and jQuery version 1.7+.
• This widget may not work properly if the table header includes rows with row or column spans.
• The responsive part of this widget
  • Uses similar parameters as those used by jQuery mobile to set column priority.
  • 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)

• columnSelector_container (null) - Target an element within the current page where the column selector will be inserted.
  • This can be either a jQuery selector string ( e.g. '#columnSelector' )
  • or, a jQuery object ( e.g. $('#columnSelector') ).
• columnSelector_columns ({}; empty object) - Assigns a column status for each selector:
  • 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 */
      }
    }

  • columnSelector_saveColumns (true) - Save the current manually set column status (not the column's responsive state). This option requires the storage utility contained within the tablesorter widgets file (jquery.tablesorter.widgets.js).
  • columnSelector_layout ('<label><input type="checkbox">{name}</label>') - This option defines the markup used for each column selector within the popup. The only required parameter is the {name} string which will be replaced with the appropriate column name/title.
  • columnSelector_name ("data-selector-name") - The data-attribute within the table header cell which contains an alternate column selector name.
    • 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.
  • columnSelector_mediaquery (true) - Set this option to add (true) or not add (false) the media query functionality of this widget.
  • columnSelector_mediaqueryName ("Auto: ") - When the media query checkbox is added (it also uses the columnSelector_layout markup), this is the name that is added. Set as "Auto" to signify to the user that columns disappearing and/or reappearing is automatically done.
  • columnSelector_mediaqueryState (true) - Set this option to false to start with the media query disabled (manual column selection mode).
  • columnSelector_breakpoints ([ "20em", "30em", "40em", "50em", "60em", "70em" ])
    • This option defines the media query breakpoints with which to use when a column with the associated priority is hidden or revealed.
    • 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 of six data-priorities is set.
  • columnSelector_priority ("data-priority") - This is the assigned data-attribute which contains the defined data priority for a table column.
    • 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.

This is probably overkill, but there are numerous ways to remove a column from the selection popup:

• 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 in order of priority:
  • jQuery data data-columnSelector="false".
  • metadata class="{ columnSelector : false }".
  • headers option headers : { 0 : { columnSelector: false } }.
  • header class name class="columnSelector-false".