Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<link rel="stylesheet" href="//mottie.github.io/tablesorter/css/theme.blue.css">
<script src="//mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="//mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script src="//mottie.github.io/tablesorter/js/widgets/widget-columnSelector.js"></script>
<div class="columnSelectorWrapper">
  <input id="colSelect1" type="checkbox" class="hidden">
  <label class="columnSelectorButton" for="colSelect1">Column</label>
  <div id="columnSelector" class="columnSelector">
    <!-- this div is where the column selector is added -->
  </div>
</div> (When "Auto" is set, the table becomes responsive; resize the browser window to see it work)
<table class="tablesorter custom-popup">
  <thead>
    <tr>
      <th data-priority="critical">Name</th>
      <!-- Remove column from selection popup by including -->
      <!-- data-priority="Anything other than 1-6" OR data-column-selector="disable" OR class="columnSelector-disable" -->
      <th class="columnSelector-disable">Major</th>
      <!-- columnSelector-false will initially hide the column -->
      <th class="columnSelector-false" data-priority="6" data-selector-name="Gender">Sex</th>
      <th data-priority="4">English</th>
      <th data-priority="5">Japanese</th>
      <th data-priority="3">Calculus</th>
      <th data-priority="2">Geometry</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Major</th>
      <th>Sex</th>
      <th>English</th>
      <th>Japanese</th>
      <th>Calculus</th>
      <th>Geometry</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Student03</td>
      <td>Languages</td>
      <td>female</td>
      <td>85</td>
      <td>95</td>
      <td>80</td>
      <td>85</td>
    </tr>
    <tr>
      <td>Student04</td>
      <td>Languages</td>
      <td>male</td>
      <td>60</td>
      <td>55</td>
      <td>100</td>
      <td>100</td>
    </tr>
    <tr>
      <td>Student05</td>
     ...

CSS

/*** custom css only popup ***/

.columnSelectorWrapper {
  position: relative;
  margin: 10px 0;
  display: inline-block;
}

.columnSelector,
.hidden {
  display: none;
}

.columnSelectorButton {
  background: #99bfe6;
  border: #888 1px solid;
  color: #111;
  border-radius: 5px;
  padding: 5px;
}

#colSelect1:checked + label {
  background: #5797d7;
  border-color: #555;
}

#colSelect1:checked ~ #columnSelector {
  display: block;
}

.columnSelector {
  width: 120px;
  position: absolute;
  top: 30px;
  padding: 10px;
  background: #fff;
  border: #99bfe6 1px solid;
  border-radius: 5px;
}

.columnSelector label {
  display: block;
}

.columnSelector label:nth-child(1) {
  border-bottom: #99bfe6 solid 1px;
  margin-bottom: 5px;
}

.columnSelector input {
  margin-right: 5px;
}

.columnSelector .disabled {
  color: #ddd;
}

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(function() {

  /*** custom css only button popup ***/
  $(".custom-popup").tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'columnSelector', 'stickyHeaders'],
    widgetOptions: {
      // target the column selector markup
      columnSelector_container: $('#columnSelector'),
      // column status, true = display, false = hide
      // disable = do not display on list
      columnSelector_columns: {
        0: 'disable' /* set to disabled; not allowed to unselect it */
      },
      // remember selected columns (requires $.tablesorter.storage)
      columnSelector_saveColumns: true,

      // container layout
      columnSelector_layout: '<label><input type="checkbox">{name}</label>',
      // data attribute containing column name to use in the selector container
      columnSelector_name: 'data-selector-name',

      /* Responsive Media Query settings */
      // enable/disable mediaquery breakpoints
      columnSelector_mediaquery: true,
      // toggle checkbox name
      columnSelector_mediaqueryName: 'Auto: ',
      // breakpoints checkbox initial setting
      columnSelector_mediaqueryState: true,
      // hide columnSelector false columns while in auto mode
      columnSelector_mediaqueryHidden: false,
      // set the maximum and/or minimum number of visible columns (v2.27.0)
      columnSelector_maxVisible: null,
      columnSelector_minVisible: null,

      // responsive table hides columns with priority 1-6 at these breakpoints
      // see http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-column-toggle/#Applyingapresetbreakpoint
      // *** set to false to disable ***
      columnSelector_breakpoints: ['20em', '30em', '40em', '50em', '60em', '70em'],
      // maximum number of priority settings; if this value is changed
      // (especially increased), then make sure to modify the
      // columnSelector_breakpoints - see...