• This widget will only work in tablesorter version 2.8+ and jQuery version 1.7+.
• Please do not use this widget in very large tables (it might be really slow) or when your table includes multiple tbodies.
  
  
• In v2.28.4, added widget.group.css file into the css folder. It contains the grouping widget css shown on this page.
• In v2.27.6, added group-date-hour group type to the Header Class Names.
• In v2.25.4, the zebra widget is reapplied to the table after opening a collapsed group.
• In v2.24.1
  • Added "group-text" group type to the Header Class Names. This class name will use the all of the text from the cell (this would essentially be the same as using "group-word-999").
  • Updated this demo to use the new "weekday-index" parser when the date column is set to "group-date-weekday", and to use the "time" parser when the date column is set to "group-date-time". It is not the most efficient because changing parsers requires an "update".
• In v2.24.0
  • This widget now works properly when used with a pager that has the `removeRows` option set to `true`.
  • Added group_time24Hour (set 12 vs 24 hour time) & group_dateInvalid (group header text) options.
  • Improved compatibility of the group widget with jQuery Globalize.
  • The group_months option will now accept a zero or one-based array or object of month names.
  • The group_week option will now accept an object using three-letter English weekday abbreviations as a key.
  • The group_time option will now accept an object using "am" or "pm" as a key.
  • For more detail, see the description column for the option in the Options section below.
  • For information on how to load & use Globalize, see the Globalization section below.

Group widget default options (added inside of tablesorter widgetOptions)

// the above example becomes: ["images", "cats", "burger-time", "jpg"]
group_separator : /[/.]/

group_formatter : function(txt, col, table, c, wo, data) {
  // If there are empty cells, name the group "Empty"
  return txt === "" ? "Empty" : txt;
}

group_callback : function($cell, $rows, column, table) {
  $cell.find('.group-name').append(' group'); // adds "group" to the end of the group name
}

$('table').on('groupingComplete', function() {
  // always hide empty groups ("Empty" can be added by the group_formatter function)
  $(this).find('.group-header:contains("Empty")').trigger('toggleGroup');
});

// zero-based array
group_months: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]

// get Months list from CLDR (see Globalization section for more info)
var months = new Cldr( 'en' ).main([ "dates/calendars/gregorian/months", "format", "abbreviated" ]);
// one-based object (CLDR output example)
// months = { 1: "Jan", 2: "Feb", 3: "Mar", 4: "Apr", 5: "May", 6: "Jun", 7: "Jul", 8: "Aug", 9: "Sep", 10: "Oct", 11: "Nov", 12: "Dec" }
// then in the widgetOptions,
group_months: months

group_months: [ "", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]

// zero-based index
group_week: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]

// get weekdays list from CLDR (see Globalization section for more info)
var weekdays = new Cldr( 'en' ).main([ "dates/calendars/gregorian/days", "format", "abbreviated" ]);
// week-abbreviation based object
// weekdays = { sun: "Sun", mon: "Mon", tue: "Tue", wed: "Wed", thu: "Thu", fri: "Fri", sat: "Sat" }
// then in the widgetOptions,
group_week: weekdays

group_time: [ "AM", "PM" ]

// get time of day list from CLDR (see Globalization section for more info)
var periods = cldr.main([ "dates/calendars/gregorian/dayPeriods", "format", "abbreviated" ]);
/* time of day: CLDR returns this object:
peroids = {
	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"
}
then in the widgetOptions,*/
group_time: periods

// you can just return date, date.toLocaleString(), date.toLocaleDateString() or d.toLocaleTimeString()
group_dateString : function(date, config, $header ) {
  return date.toLocaleString();
}

Group header class names (when changing the grouping, notice that the sort doesn't change, just the position and names of the group headers):

Before v2.24.1, this demo only used the "shortDate" parser on the date column, so when "group-date-week" or "group-date-time" were set, group headers would repeat.

Toggle all Groups

// "toggle" class name added to a button/link
$('.toggle').click(function() {
  // show/hide all groups - table must be grouped (sorted or force grouping)
  $('table').find('.group-header').trigger('toggleGroup');
  return false;
});

jQuery Globalize

Here is a demo showing how all the code comes together; there is no official site with JSON files available to load into the demo, so only the required snippets of CLDR data are included in the demo.

Make sure to include files from:

• jQuery Globalize:
  • Process CLDR data into usable formats.
  • Install from npm (npm install globalize cldr-data), bower (bower install globalize), or
  • Download from https://github.com/jquery/globalize.
  • Depending on the data in your table, you'll need to pick which modules to include; currently for the date module, you'll need to load the number module first (ref).
  • Here is an example of how to load all files from Cdnjs (make sure to use the most recent version):

    <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/currency.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.0.0/globalize/number.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.0.0/globalize/date.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.0.0/globalize/message.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.0.0/globalize/plural.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.0.0/globalize/relative-time.min.js"></script>
    

• cldrjs:
  • Needed by Globalize to traverse CLDR data.
  • Install from npm (npm install cldrjs), bower (bower install cldrjs), or
  • Download from https://github.com/rxaviers/cldrjs.
  • You will likely need to include all files: cldr.js, event.js, supplemental.js and unresolved.js.
  • Here is an example of how to load all files from Cdnjs (make sure to use the most recent version):

    <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.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.3/cldr/supplemental.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.3/cldr/unresolved.min.js"></script>
    

• CLDR data:
  • Needed by Globalize & cldrjs.
  • Install from npm (npm install cldr-data), bower (bower install cldr-data), or
  • Find the latest version from here: http://cldr.unicode.org/index/downloads
  • And download the files from here: http://unicode.org/Public/cldr/ (it is really hard to find this page).
  • For more information on which json files you'll need to include, check out these instructions.

Initialization

// code to show how to load a language using jQuery (make sure it was loaded)
$(function() {
	var hasInitialized = false,
		loadLanguage = function( lang ) {
			// Use $.getJSON instead of $.get if your server is not configured to return the
			// right MIME type for .json files.
			var files = [];
			if ( !hasInitialized ) {
				files = [
					/* core */
					$.getJSON( 'cldr-data/supplemental/likelySubtags.json' ),
					/* currency */
					$.getJSON( 'cldr-data/supplemental/currencyData.json' ),
					/* date */
					$.getJSON( 'cldr-data/supplemental/timeData.json' ),
					$.getJSON( 'cldr-data/supplemental/weekData.json' ),
					/* number */
					$.getJSON( 'cldr-data/supplemental/numberingSystems.json' ),
					/* plural */
					$.getJSON( 'cldr-data/supplemental/plurals.json' ),
					$.getJSON( 'cldr-data/supplemental/ordinals.json' )
				];
			}
			files = files.concat([
				/* currency */
				$.getJSON( 'cldr-data/main/' + lang + '/currencies.json' ),
				/* date */
				$.getJSON( 'cldr-data/main/' + lang + '/ca-gregorian.json' ),
				$.getJSON( 'cldr-data/main/' + lang + '/timeZoneNames.json' ),
				/* number */
				$.getJSON( 'cldr-data/main/' + lang + '/numbers.json' ),
				/* relative time */
				$.getJSON( 'cldr-data/main/' + lang + '/dateFields.json' ),
				/* unit */
				$.getJSON( 'cldr-data/main/' + lang + '/units.json' )
			]);
			$.when
				.apply( $, files )
				.then( function() {
					// Normalize $.get results, we only need the JSON, not the request statuses.
					return [].slice.apply( arguments, [ 0 ] ).map( function( result ) {
						return result[ 0 ];
					});
				})
				.then( Globalize.load )
				.then( function() {
					if ( !hasInitialized ) {
						// initialization code goes here
					}
					hasInitialized = true;
					// code to run after each new language has loaded goes here
				});
		};

	// initial language load
	loadLanguage( 'en' );
});

Usage

In v2.24.0

• The group_months, group_week & group_time options were modified to work with CLDR data.
• group_months option will work with either a zero-based array of month names (basic use), or an object with a key using a one-based indexed with a month name value pair (the CLDR format; see the "months" comment in code example below).
• group_week option will work with either a zero-based array of weekday names (basic use), or an object with a key using three letter abbreviations of English weekday names with a localized weekday name value pair (the CLDR format; see the "days of week" comment in the code below).
• group_time option will now accept an object using "am" or "pm" (both lower case) as a key.
  
  
• The group_dateString callback function was updated with two additional parameters to allow access to table data. See the "Options" section above for more details.
• Check out this demo using the code below

$( function() {
	// using an english example
	var lang = 'en',
		cldr = new Cldr( lang ),
		// Globalize.load already done!!
		globalize = Globalize.locale( 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" ]);

	$( 'table' ).tablesorter({
		theme : 'blue',
		widgets: [ 'group', 'zebra' ],
		widgetOptions : {
			group_months     : months,
			group_week       : week,
			// setting group_times to an empty string forces "group-time" to use group_dateString function
			group_time       : periods,
			group_dateString : function ( date, c, $column ) {
				// see https://github.com/jquery/globalize/blob/master/doc/api/date/date-formatter.md
				var hour = date.getHours(),
					min = date.getMinutes(),
					format = globalize.dateFormatter({ datetime: "full" })( date ),
					time = globalize.dateFormatter({ time: "full" })( date );
				// replace special times with time period
				if ( hour === 0 && min === 0 ) {
					// midnight: this method may not work in all locales!
					return format.replace( time, periods.midnight );
				} else if ( hour === 12 && min === 0 ) {
					// noon: this method may not work in all locales!
					return format.replace( time, periods.noon );
				}
				return format;
			}
		}
	});

});