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">
<script src="http://mottie.github.com/tablesorter/js/parsers/parser-input-select.js"></script>
<script src="http://mottie.github.com/tablesorter/js/widgets/widget-grouping.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.3/cldr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.3/cldr/event.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.3/cldr/supplemental.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.3/cldr/unresolved.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.0.0/globalize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.0.0/globalize/number.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.0.0/globalize/date.js"></script>
<table id="groups">
    <thead>
        <tr>
            <th class="group-word first"></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>
    ...

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;
}
.group-date, .group-month, .group-week {
    width: 200px;
}
tbody input {
    max-width: 120px;
}
.first { width: 20px; }

JavaScript

$(function () {
	var lang = 'en',
		cldr = new Cldr(lang),
		globalize = Globalize(lang),
		// months: CLDR returns an object { 1: "Jan", 2: "Feb", 3: "Mar", ..., 12: "Dec" }
		months = cldr.main(["dates/calendars/gregorian/months", "format", "abbreviated"]),
		// days of week: CLDR returns { sun: "Sun", mon: "Mon", tue: "Tue", wed: "Wed", thu: "Thu", ... }
		week = cldr.main(["dates/calendars/gregorian/days", "format", "abbreviated"]),
		/* time of day: CLDR returns
			{ afternoon1: "in the afternoon", am: "AM", am-alt-variant: "am", evening1: "in the evening", midnight: "midnight",
			morning1: "in the morning", night1: "at night", noon: "noon", pm: "PM", pm-alt-variant: "pm" } */
		periods = cldr.main([ "dates/calendars/gregorian/dayPeriods", "format", "abbreviated" ]);

	$("#groups").tablesorter({
		theme: "blue",
		headers: {
			0: { sorter: "checkbox" },
			3: { sorter: "select" },
			6: { sorter: "inputs" },
			7: { sorter: "date" }
		},
		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: months,
			group_week: week,
			group_time: periods,

			// 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:...