Home

Wiki: Home | FAQ | Customize | Snippets | Search | Language | Changes | Older-changes-2.25.0 | Older-changes-2.13.0 | Change summary

Tablesorter Playgrounds

Use these demos to try out the available options. NOTE some of these demos will not work over an HTTPS protocol!

Basic demos

• tablesorter basic - test all options & widgets (except the uitheme widget).
• tablesorter UI theme - test out the jQuery UI theme widget; separate because of the different stylesheets.
• tablesorter Bootstrap with pager - test out Bootstrap with the pager plugin.
• tablesorter + pager (addon/widget) - test tablesorter with the pager addon or widget.
• tablesorter + pager ajax (addon/widget) - this demo uses filltext.com, so there is no sorting or filtering.
• tablesorter with child rows

Basic Widget Demos

• alignChar (vertically align text by a specified character).
• build-table (build table from csv, json, etc).
• chart data with Google, Highcharts, or FusionCharts.
• columns (highlight sorted columns).
• columnSelector (toggle viewed columns).
• dragtable.
• editable (make columns contenteditable).
• formatter.
• grouping.
• lazyload.
• math.
• output.
• pager.
• print.
• reflow (reflow + columnSelector).
• resizable.
• scroller.
• sortTbodies.
• staticRow.
• stickyHeaders.
• stickyHeaders (css3).

Themes (LESS & others)

• tablesorter LESS theme - modify the colors dynamically in this LESS theme demo!
• tablesorter Bootstrap LESS theme - modify the colors dynamically.
• tablesorter Metro LESS theme - inspired by the jTable.org metro styles.
• Materialize theme - using header background images or material icons widget; also include the Materialize overall theme; see issues #1242 & #1352.
• High specificity blue theme - applied to an outer table containing a nested table with a different theme; see Stack Overflow.

More demos

Parsers

• Forms

  • Dynamic checkbox sorting w/pager plugin & filter (11/14/2015; all necessary code included in parser-input-select.js file).
  • Older versions of parsers (do not use; kept here for reference)
    • Dynamic checkbox sorting w/scroller widget (7/26/2015); see issue #977.
    • Dynamic checkbox sorting (12/25/2012); updated for jQuery 1.7+ (10/2/2014).
    • Dynamic input value sorting.

• Dates

  • Parse two digit years (using "ddmmyy" format).
  • Parse Dates with Sugar; see issue #247.
  • Parse Month & Weekday.
  • Parse counter times (e.g. 10:30:40 10 hours 30 minutes & 40 seconds); see this Stackoverflow question.

• Other

  • Currency Number (php) format (updated 6/2/2012) - currency symbol follows the value (thanks to locationRoura).
  • Feet/inches & fractions - basic demo & full demo - these demos were made to answer this Stackoverflow question.
  • File types.
  • Metric numbers (including binary sizes, e.g. 1 Mb).
  • Title parser: (basic & extendable language support) version - Ignore "The", "A" and "An" in book and movie titles.
  • Generic version parser - see Stackoverflow.
  • Sort leading zeros - see Stackoverflow.
  • Sort grades - see issue #1407.
  • Remove Diacritics - Similar to setting the sortLocaleCompare option, but uses browser built-in methods.

Widgets

• ColumnSelector

  • Multiple column selection in popup, using radio buttons.

• Dragtable

  • Dragtable widget (jQuery UI sortable widget required).
  • Dragtable plugin (original demo before the widget was made).

• Editable

  • Editable widget + jQuery UI Autocomplete - thanks @TheSin-!
  • Using jQuery Tabledit plugin - demo; see Stackoverflow.
  • Use up and down arrows to navigate cells - see issue #1463.

• Filter Widget

  • External Control of filter widget select.
  • External multi-select; see issue #717.
  • Save filters on reload; see issue #146.
  • Filter toggle buttons - allows multiple filters; see Stackoverflow.
  • Modify the filters sent to server - this demo shows how you can modify the filters for MySQL to use filter_startsWith (or ends with) searchs; see issue #526.
  • No filter result message (with pager) - see Stackoverflow.
  • No filter result message (without pager) - see Stackoverflow.
  • Select option sorts using a custom parser.
  • Populate select from a LIST in the cell - see Stackoverflow.
  • Populate select from a TABLE within the cell.
  • Show/hide rows from the filter - see Stackoverflow.
  • Add custom filters - add custom filter types to search from beginning or end of the content.
  • Add jQuery selectmenu widget - apply a jQuery selectmenu widget to the filter row.
  • Filter empty cells - uses filter_selectSource along with filter_functions; see Stackoverflow.
  • Always display a particular filter result; uses filter_defaultFilter and a filter-match header class:
    • Example 1 - see Stackoverflow.
    • Example 2 - see issue #1490.
  • Select2 v3.4.6 - uses the filter_formatter option and the widget-filter-formatter-select2.js file.
  • Custom filter row - see issue #1499.

• Date Pickers

  • Date range select - using filter_functions.
  • Bootstrap-daterangepicker - uses dangrossman/bootstrap-daterangepicker plugin.
  • jQuery Date Range Picker - uses longbill/jquery-date-range-picker plugin.
  • jQuery Datepicker - uses keith wood datepicker plugin.
  • jQuery Filament Group Datepicker - uses Filament Group Date Range Picker plugin.

• Grouping

  • Combine with math widget](https://jsfiddle.net/Mottie/st2p6uvs/) - this demo requires both the math & group widgets in the master branch (which will be released as v2.27.0).
  • Combine Filter, Grouping & Ouput.

• Output

  • Export selected option in column - By using the output_formatContent callback, user selected options will be output instead of all options.
  • Export parsed checkbox values in the tbody and include the column header text - see issue #1565.

• Pager

  • Custom pager controls: beta-testing & original from Stackoverflow.
  • Custom Pager with Progress bar by TheSin-.
  • Pager widget + simplePagination.js; see demo & Stackoverflow.

• Scroller

  • scroller with dynamic height: version 1, version 2 (see issue #1212.
  • scroller to set row; see Stackoverflow.

• Sticky Headers

  • CssStickyHeaders widget inside of a Magnific popup window; See Stackoverflow.
  • CssStickyHeaders with Bootstrap navbar; see issue #1371.

• Other

  • Automatic Row numbering (with pager & without pager); see Stackoverflow.
  • Automatic Row numbering with values instead of an index. See issue #616.
  • Add a spacer after groups of same content (updated 6/2/2012); see Stackoverflow.

Sorting

• Block sort (set sorter false) on a variable number of columns by setting header class name or setting the headers option; see issue #205.
• External links that toggle sort direction
• Sort table using a dropdown list - see Stackoverflow; but updated to allow toggling of the sort.
• Disable sorting when less than a minimum number of rows are present and remove ALL styling; see issue #209.
• Change sorter to emulate sugar.js' sort (demo; see issue #212).
• Sort and filter multiple tables at once.
• Sort a column containing a range of numbers - see Stackoverflow.
• Move checked rows into a non-sortable tbody - see Stackoverflow.
• Make sort arrows separate - See issue #601.
• Dynamic sortAppend - see issue #3.
• Sort column content:
  • Two different ways (by name or percentage); two methods: method 1 and method 2 (by Banana) - see Stackoverflow.
  • 3+ data sets with a link to sort (text separator required) - See this Stackoverflow question.
  • 3+ data sets with a select, then click header to sort - see issue #1263.
  • Using one set of data for ascending sort & a different data for descending sort (demo) - see Stackoverflow.
• Sort column on Double click (dblclick).
• Set a custom textSorter by header class name - see Stackoverflow.

Misc

• A basic demo that totals up columns and rows - it utilizes multiple tbodies in the table
• Handling rowspans in the data area of the table by replacing them with single cells
• Dealing with anchors inside of a table with stickyHeaders (Updated for version 2.4).
• Initializing & applying zebra widget within jQuery UI tabs.
• Tablesorter in jQuery UI tabs - see Stackoverflow.
• Scroll to id with sticky headers
• Save child row state on page refresh - see issue #595.
• Make child rows manually sortable within a parent - see issue #636 for limitations.
• Dialog with ajax loaded table - see Stackoverflow.
• Use with Mark.js - basic & per column - see issue #1243.
• Hide wide content; click cell to show.
• Rotate Header Text.
• Handling parent & child row checkboxes where the parent row checkbox updates based on the child row checkbox state - see Stackoverflow.
• Heat map demo modified from this tutorial.

Plugins (3rd party)

• No longer supported: quicksearch plugin - with pager & without pager.