Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.blue.css">
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script src="https://mottie.github.io/tablesorter/js/parsers/parser-input-select.js"></script>
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-grouping.js"></script>
<table id="groups">
  <thead>
    <tr>
      <th class="group-word"></th> <!-- checkbox status -->
      <th class="group-number">Quality (number)</th> <!-- notice this uses the same class name as the Numeric column, it's just left at 1 -->
      <th class="group-number-10">Numeric (every <span>10</span>)</th>
      <th class="group-letter-1">Priority (letter)</th>
      <th class="group-letter-1">Animals (first <span>letter</span>)</th>
      <th class="group-word-1">Natural Sort (first word)</th>
      <th class="group-word-2">Inputs (second word)</th>
      <!-- try "group-date", "group-date-year", "group-date-month", "group-date-day", "group-date-week" or "group-date-time" -->
      <th class="group-date">Date (<span>Full</span>)</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th></th>
      <th>Quality</th>
      <th>Numeric</th>
      <th>Priority</th>
      <th>Animals</th>
      <th>Natural Sort</th>
      <th>Inputs</th>
      <th>Date</th>
    </tr>
  </tfoot>
  <tbody>
    <tr><td><input type="checkbox" checked=""></td><td>1</td><td>10</td><td><select><option selected="">A</option><option>B</option><option>C</option></select></td><td>Koala</td><td>abc 123</td><td><input type="text" value="item: truck"></td><td>1/13/2013 12:01 AM</td></tr>
    <tr><td><input type="checkbox"></td><td>3</td><td>29</td><td><select><option>A</option><option>B</option><option selected="">C</option></select></td><td>Kangaroo</td><td>abc 1</td><td><input type="text" value="item: car"></td><td>1/15/2013</td></tr>
   ...

CSS

tr.group-header td {
  background: #eee;
}
.group-name {
  text-transform: uppercase;
  font-weight: bold;
}
.group-count {
  color: #999;
}
.group-hidden {
  display: none;
}
.group-header, .group-header td {
  user-select: none;
  -moz-user-select: none;
}
/* collapsed arrow */
tr.group-header td i {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid #888;
  border-right: 4px solid #888;
  border-left: 4px solid transparent;
  margin-right: 7px;
  user-select: none;
  -moz-user-select: none;
}
tr.group-header.collapsed td i {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #888;
  border-right: 0;
  margin-right: 10px;
}

JavaScript

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

  $("#groups").tablesorter({
    theme : "blue",
    headers: {
      0: { sorter: "checkbox" },
      3: { sorter: "select" },
      6: { sorter: "inputs" }
    },
    widgets: [ "group", "columns", "filter", "zebra" ],
    widgetOptions: {
      group_collapsible : true,  // make the group header clickable and collapse the rows below it.
      group_collapsed   : false, // start with all groups collapsed (if true)
      group_saveGroups  : true,  // remember collapsed groups
      group_saveReset   : '.group_reset', // element to clear saved collapsed groups
      group_count       : " ({num})", // if not false, the "{num}" string is replaced with the number of rows in the group

      // checkbox parser text used for checked/unchecked values
      group_checkbox    : [ 'checked', 'unchecked' ],

      // change these default date names based on your language preferences
      group_months      : [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
      group_week        : [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ],
      group_time        : [ "AM", "PM" ],

      // this function is used when "group-date" is set to create the date string
      // you can just return date, date.toLocaleString(), date.toLocaleDateString() or d.toLocaleTimeString()
      // reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#Conversion_getter
      group_dateString  : function(date) {
        return date.toLocaleString();
      },

      group_formatter   : function(txt, col, table, c, wo) {
        // txt = current text; col = current column
        // table = current table (DOM); c = table.config; wo = table.config.widgetOptions
        if (col === 7 && txt.indexOf("GMT") > 0) {
          // remove "GMT-0000 (Xxxx Standard Time)" from the end...