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>
<script src="https://rawgit.com/Mottie/tablesorter/master/js/widgets/widget-output.js"></script>
<button type="button" class="download">Get CSV</button>
<button type="button" class="toggle">Toggle Groups</button>

<table id="groups">
  <thead>
    <tr>
      <th class="group-letter-3">AlphaNumeric</th>
      <th class="group-number-10">Numeric</th>
      <th class="group-letter">Animals</th>
      <th class="group-separator-2">Sites</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>abc 123</td>
      <td>10</td>
      <td>Koala</td>
      <td>http://www.google.com</td>
    </tr>
    <tr>
      <td>abc 1</td>
      <td>234</td>
      <td>Ox</td>
      <td>http://www.yahoo.com</td>
    </tr>
    <tr>
      <td>abc 9</td>
      <td>10</td>
      <td>Girafee</td>
      <td>http://www.facebook.com</td>
    </tr>
    <tr>
      <td>zyx 24</td>
      <td>767</td>
      <td>Bison</td>
      <td>http://www.whitehouse.gov/</td>
    </tr>
    <tr>
      <td>abc 11</td>
      <td>3</td>
      <td>Chimp</td>
      <td>http://www.ucla.edu/</td>
    </tr>
    <tr>
      <td>abc 2</td>
      <td>56</td>
      <td>Elephant</td>
      <td>http://www.wikipedia.org/</td>
    </tr>
    <tr>
      <td>abc 9</td>
      <td>155</td>
      <td>Lion</td>
      <td>http://www.nytimes.com/</td>
    </tr>
    <tr>
      <td>ABC 10</td>
      <td>87</td>
      <td>Zebra</td>
      <td>http://www.google.com</td>
    </tr>
    <tr>
      <td>zyx 1</td>
      <td>999</td>
      <td>Koala</td>
      <td>http://www.mit.edu/</td>
    </tr>
    <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() {
  var $table = $('#groups');

  $('.download').click(function() {
    $table.trigger('outputTable');
    return false;
  });

	$('.toggle').click(function(e){
  	$table.find('.group-header').trigger('toggleGroup');
    return false;
  });

  $table.tablesorter({
    theme: "blue",
    widgets: ["group", "columns", "filter", "zebra", 'output'],
    widgetOptions: {
      group_separator: ".",
      group_count: " ({num})"
    }
  });

});