Home

Wiki: Home | FAQ | Customize | Snippets | Search | Language | Changes | 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.

Basic Widget Demos

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

LESS Themes

• 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 (not LESS)

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.

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.

• 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.

  Date Pickers * [Date range select](http://jsfiddle.net/Mottie/abkNM/12/) - using `filter_functions`. * [Bootstrap-daterangepicker](http://jsfiddle.net/abkNM/2188/) - uses [dangrossman/bootstrap-daterangepicker](https://github.com/dangrossman/bootstrap-daterangepicker) plugin. * [jQuery Date Range Picker](http://jsfiddle.net/Mottie/abkNM/8198/) - uses [longbill/jquery-date-range-picker](https://github.com/longbill/jquery-date-range-picker) plugin. * [jQuery Datepicker](http://jsfiddle.net/Mottie/abkNM/2914/) - uses [keith wood datepicker](http://keith-wood.name/datepick.html#range) plugin. * [jQuery Filament Group Datepicker](http://jsfiddle.net/Mottie/abkNM/2915/) - uses [Filament Group Date Range Picker](http://filamentgroup.com/lab/date-range-picker-using-jquery-ui-16-and-jquery-ui-css-framework.html) 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.

• Pager

  • 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.

• 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 - from this Stackoverflow question; 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 - from this Stackoverflow question.
• Move checked rows into a non-sortable tbody - from this Stackoverflow question.
• 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 this Stackoverflow question.
  • 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) - from this Stackoverflow question.
• Sort column on Double click (dblclick).

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.
• Custom pager controls - from this Stackoverflow question.
• Tablesorter in jQuery UI tabs - from this Stackoverflow question.
• 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 - from this Stackoverflow question.
• Use with Mark.js - basic & per column - see issue #1243.

Plugins (3rd party)

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