Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script>
<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.blue.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.dark.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.default.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.dropbox.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.green.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.grey.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.ice.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.black-ice.css">
<script src="http://mottie.github.com/tablesorter/js/widgets/widget-grouping.js"></script>
<script src="http://mottie.github.com/tablesorter/js/parsers/parser-file-type.js"></script>
<table class="tablesorter">
  <thead>
    <tr>
      <th class="sorter-filetype group-separator">Desktop Files</th>
      <th class="sorter-filetype group-separator-1">Tablesorter Files</th>
      <th id="media" class="group-separator-2">Media</th>
      <th class="sorter-filetype group-separator-1">Media Files</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>github.url</td><td>package.json</td><td>Music Disc #1 - Green Day - Boulevard of Broken Dreams</td><td>Muse - Supermassive Black Hole.mp3</td></tr>
    <tr><td>tablesorter.zip</td><td>readme.md</td><td>Music Disc #1 - Green Day - Holiday</td><td>Gorillaz - Feel Good Inc.mp3</td></tr>
    <tr><td>learn-git.pdf</td><td>index.html</td><td>Music Disc #1 - M83 - Midnight City</td><td>M83 - Midnight City.mp4</td></tr>
    <tr><td>pancake-cat.jpg</td><td>jquery.tablesorter.js</td><td>Music Disc #1 - Bob Marley - Everything is Gonna Be Alright</td><td>Radiohead -...

CSS

/* grouping widget 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

$(function() {

  // basic list from http://en.wikipedia.org/wiki/List_of_file_formats
  // there is no need to include this unless you plan on replacing the
  // default settings completely
  $.tablesorter.fileTypes = {
    // divides filetype extensions in the equivalent list below
    separator : '|',
    equivalents : {
      "3D Image"     : "3dm|3ds|dwg|max|obj",
      "Audio"        : "aif|aac|ape|flac|la|m4a|mid|midi|mp2|mp3|ogg|ra|raw|rm|wav|wma",
      "Compressed"   : "7z|bin|cab|cbr|gz|gzip|iso|lha|lz|rar|tar|tgz|zip|zipx|zoo",
      "Database"     : "csv|dat|db|dbf|json|ldb|mdb|myd|pdb|sql|tsv|wdb|wmdb|xlr|xls|xlsx|xml",
      "Development"  : "asm|c|class|cls|cpp|cc|cs|cxx|cbp|cs|dba|fla|h|java|lua|pl|py|pyc|pyo|sh|sln|r|rb|vb",
      "Document"     : "doc|docx|odt|ott|pages|pdf|rtf|tex|wpd|wps|wrd|wri",
      "Executable"   : "apk|app|com|exe|gadget|lnk|msi",
      "Fonts"        : "eot|fnt|fon|otf|ttf|woff",
      "Icons"        : "ani|cur|icns|ico",
      "Images"       : "bmp|gif|jpg|jpeg|jpe|jp2|pic|png|psd|tga|tif|tiff|wmf|webp",
      "Presentation" : "pps|ppt",
      "Published"    : "chp|epub|lit|pub|ppp|fm|mobi",
      "Script"       : "as|bat|cgi|cmd|jar|js|lua|scpt|scptd|sh|vbs|vb|wsf",
      "Styles"       : "css|less|sass",
      "Text"         : "info|log|md|markdown|nfo|tex|text|txt",
      "Vectors"      : "awg|ai|eps|cdr|ps|svg",
      "Video"        : "asf|avi|flv|m4v|mkv|mov|mp4|mpe|mpeg|mpg|ogg|rm|rv|swf|vob|wmv",
      "Web"          : "asp|aspx|cer|cfm|htm|html|php|url|xhtml"
    }
  };

  // To add a custom equivalent, define:
  // $.tablesorter.fileTypes.equivalents['xx'] = "A|B|C";

  // This demo uses the group widget to organize the file type equivalents
  $("table").tablesorter({
    theme: 'blue',
    widgets : [ 'group', 'zebra', 'columns' ],
    widgetOptions: {
      group_separator : '-' // default setting
    }
  });

});