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://rawgit.com/Mottie/tablesorter/master/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://rawgit.com/Mottie/tablesorter/master/js/widgets/widget-grouping.js"></script>
<script src="https://rawgit.com/Mottie/tablesorter/master/js/widgets/widget-math.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>
   ...

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/
 * NOTE: THIS DEMO REQUIRES TABLESORTER V2.27.0+
 */
$(function() {

  $("#groups")
    .on('groupingComplete', function() {
      // update math
      if ($(this).find('.sum').length) {
        $(this).trigger('recalculate');
      }
    })
    .tablesorter({
      theme: "blue",
      headers: {
        0: { sorter: "checkbox" },
        3: { sorter: "select" },
        6: { sorter: "inputs" }
      },
      widgets: ["group", "columns", "filter", "math", "zebra"],
      widgetOptions: {
        group_checkbox: [ 'checked', 'unchecked' ],
        group_callback: function($cell, $rows, column, table) {
          if (column > 0 && column < 3) {
            $cell
            // add a place for the math widget to target
              .append('; grouping sum = <span class="sum">0</span>')
              .attr({
                // show the sum of the rows below the group header
                'data-math': 'below-sum',
                // target the newly added span
                'data-math-target': '.sum',
                // set the column to target
                'data-column': column
              });
          }
        },
        math_mask: '#.'
      }
    });

});