Notes
- 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.21.0
- Added
group_checkbox
option to allow setting the parsed text from the "parser-input-select.js" checkbox parser. - Fixed an issue with the filter widget overriding the "group-hidden" class name.
- Added
- In v2.15.6, added
group_saveGroups
&group_saveReset
options. More details are included in the "Options" section. - In v2.14, added
group_dateString
option. More details are included in the "Options" section. - In v2.13, added
group_separator
option &group-separator-#
header class name. To see this in action, check out the file type parser demo. - In v2.12, added
group_callback
&group_complete
options. See options section below for details. - In v2.11:
- The grouping widget now works across multiple tbodies.
- Added
group-false
header option which disables the grouping widget for a specific column. - Added the
group_collapsed
option - get more details in the options block below. - You can now toggle all group rows by holding down the Shift key while clicking on a group header.
- This widget now works properly with the pager addon (pager addon updated).
- Clicking on any of the sortable header cells will cause the column below it to sort and add a group header.
Options
Group widget default options (added inside of tablesorter widgetOptions
)
TIP! Click on the link in the option column to reveal full details (or toggle|show|hide all) or double click to update the browser location.
Option | Default | Description |
---|---|---|
group_collapsible | true |
when true , the group headers become clickable and collapse the rows below it.
|
group_collapsed | false |
when true and group_collapsible is also true , all groups will start collapsed (v2.11)
|
group_saveGroups | true |
Remember collapsed groups (v2.15.6)
|
group_saveReset | null |
Element used to clear saved collapsed groups (v2.15.6)
|
group_count | " ({num})" |
Allows you to add custom formatting, or remove, the group count within the group header. Set it to false or an empty string to remove the count.
|
group_separator | "-" |
When the group-separator class name is added, it uses the setting from this option to split the table cell content for grouping v2.13.If your content has mixed separators (e.g. images/cats/burger-time.jpg ), you can set this option to use a regular expression:
// the above example becomes: ["images", "cats", "burger-time", "jpg"] group_separator : /[/.]/ |
group_formatter | null |
Use this function to modify the group header text before it gets applied.
It provides various parameters ( txt, col, table, c, wo ) to make it work for any of the table columns and data. See the comments in the example below for more details.
group_formatter : function(txt, col, table, c, wo) { // If there are empty cells, name the group "Empty" return txt === "" ? "Empty" : txt; } |
group_callback | null |
Use this function to further modify the group header to include more information (i.e. group totals). Parameters include ($cell, $rows, column, table ). See the example below for more details v2.12.
group_callback : function($cell, $rows, column, table){ $cell.find('.group-name').append(' group'); // adds "group" to the end of the group name } |
group_complete | "groupingComplete" |
Event triggered on the table when the grouping widget has finished work v2.12.
$('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'); }); |
group_checkbox | see description) |
Set checkbox parser text (v2.21.0)
The checkbox parser in the "parser-input-select.js" file will use this option to set the group header text displayed for a checkbox state. Defaults are: [ "checked", "unchecked" ]
|
group_months group_week group_time |
(see description) |
Name arrays included so that the language of the date groups can be modified easily. Defaults (English):
|
group_dateString | (see description) |
When the "group-date" class name is set on a column, this function is used to format the date string. This is the default function:
// you can just return date, date.toLocaleString(), date.toLocaleDateString() or d.toLocaleTimeString() group_dateString : function(date) { return date.toLocaleString(); }Other functions that can be used are date (alone), date.toLocaleString() , date.toLocaleDateString() or d.toLocaleTimeString() . See this reference for more details.
|
Header Class Names
Group header class names (when changing the grouping, notice that the sort doesn't change, just the position and names of the group headers):
Group type | Group class name | Description |
---|---|---|
Disable | "group-false" |
Disable grouping of rows for a column (v2.11). |
Text | "group-word" |
Group the rows using the first word it finds in the column's parsed data (same as "group-word-1" ). |
"group-word-n" * |
Group the rows using the nth word in the column ("n" can be any number). |
|
"group-letter" |
Group the rows using the first letter it finds in the column's parsed data (same as "group-letter-1" ). |
|
"group-letter-n" * |
Group the rows using letters 1 through n (if n = 2, then it's the first 2 letters) in the column's parsed data ("n" can be any number). |
|
Number | "group-number" |
Group the rows by the number it finds in the column (step of one; same as "group-number-1" ). |
"group-number-n" * |
Group the rows into blocks of every n values. So, if n = 10, the groups will be 0-9, 10-19, 20-29, etc ("n" can be any number). |
|
Separator | "group-separator" |
Group the rows using the text between the start and first separator that it finds in the column's parsed data (same as "group-separator-1" ) (v2.13). |
"group-separator-n" * |
Group the rows using the nth separated group in the column ("n" can be any number) (v2.13). |
|
Date | "group-date" |
Group the rows by full date (this shows the current UTC time corrected for your time zone). |
"group-date-year" * |
Group the rows by year. | |
"group-date-month" * |
Group the rows by month. | |
"group-date-monthyear" * |
Group the rows by month & year. | |
"group-date-week" * |
Group the rows by day of the week. | |
"group-date-day" * |
Group the rows by month/day. | |
"group-date-time" * |
Group the rows by time. |
Demo
Numeric column: (includes subtotals)Animals column:
Date column:
Quality (number) | Numeric (every 10) | Priority (letter) | Animals (first letter) | Natural Sort (first word) | Inputs (second word) | Date (Full) | |
---|---|---|---|---|---|---|---|
Quality | Numeric | Priority | Animals | Natural Sort | Inputs | Date | |
1 | 10 | Koala | abc 123 | 1/13/2013 12:01 AM | |||
3 | 29 | Kangaroo | abc 1 | 1/15/2013 | |||
2 | 10 | Ant | abc 9 | 1/13/2013 | |||
3 | 81 | Bee | zyx 24 | 1/11/2013 | |||
3 | 21 | Aardwolf | zyx 55 | 1/13/2013 03:30 AM | |||
1 | 3 | Bear | abc 11 | 1/15/2013 | |||
4 | 12 | Armadillo | zyx 2 | 1/15/2013 12:30 PM | |||
2 | 56 | Aardvark | abc 2 | 1/22/2013 | |||
1 | 55 | Lion | abc 9 | 2/15/2013 | |||
4 | 87 | Anteater | ABC 10 | 1/3/2013 | |||
2 | 98 | Lemur | zyx 1 | 1/11/2013 | |||
1 | 20 | Llama | zyx 12 | 12/13/2012 |
Page Header
<!-- Tablesorter: required --> <link href="../css/theme.blue.css" rel="stylesheet"> <script src="../js/jquery.tablesorter.js"></script> <script src="../js/jquery.tablesorter.widgets.js"></script> <!-- Grouping widget --> <script src="../js/parsers/parser-input-select.js"></script> <script src="../js/widgets/widget-grouping.js"></script>