Notes

This widget will only work in tablesorter version 2.16+ and jQuery version 1.7+.
It allows you to add custom formatting to table columns.
You have the option of storing the original cell text within the table cell data-attribute to maintain the sort order.
This widget is not optimized for large tables; but it only runs on initialization and after any updates have occurred.

Options

Formatter widget default options (added inside of tablesorter `widgetOptions`)

TIP! Click on the link in the function column to reveal full details (or toggle|show|hide all) or double click to update the browser location.

Option	Description
formatter_column	Assign a formatting function by column index or column header class name; these functions only apply to the `tbody` cells. Set up the formatter to return the HTML for the table cell. formatter_column: { '.emphasize' : function( text, data ) { return '<strong>' + text + '</strong>'; } } If the text in the cell is to be changed, but you don't want the sort to be effected, then add the original text into the data-attribute as follows: formatter_column: { '.makesearch' : function( text, data ) { // don't make a link if there is no text in the cell if ( text === '' ) { return ''; } // add text to data-attribute; this overrides the parser data.$cell.attr( data.config.textAttribute, text ); // then replace text with a link return '<a href="http://mysite.com?query=' + encodeURIComponent(text) + '">Get Definition</a>'; } } The `data` parameter provided to the `formatter_column` function contains the following information: data = { config : table.config, wo : table.config.widgetOptions, $header : $('th'), // the header cell of the current column $row : $('tr'), // jQuery object of the row currently being processed $cell : $('td'), // jQuery object of the cell currently being processed text : 'Batman', // the text from the current cell columnIndex : 0 // the column index of the current cell }
formatter_event	The formatter will update when this event is triggered on the table. The default setting is `'applyFormatter'` The formatter is set up to run again after an "updateComplete" or "pagerComplete" event fires; this option allows setting a custom-named event to force the formatter to update in addition to the complete events. * NOTE * So, if the text in the cell gets modified by the formatter, make sure your code saves the original text into the data-attribute or it will get lost. Force an update as follows: $('table').trigger('applyFormatter');

Option

Description

formatter_column

Assign a formatting function by column index or column header class name; these functions only apply to the tbody cells.

Set up the formatter to return the HTML for the table cell.

formatter_column: {
  '.emphasize' : function( text, data ) {
    return '<strong>' + text + '</strong>';
  }
}

If the text in the cell is to be changed, but you don't want the sort to be effected, then add the original text into the data-attribute as follows:

formatter_column: {
  '.makesearch' : function( text, data ) {
    // don't make a link if there is no text in the cell
    if ( text === '' ) { return ''; }
    // add text to data-attribute; this overrides the parser
    data.$cell.attr( data.config.textAttribute, text );
    // then replace text with a link
    return '<a href="http://mysite.com?query=' + encodeURIComponent(text) + '">Get Definition</a>';
  }
}

The data parameter provided to the formatter_column function contains the following information:

data = {
  config      : table.config,
  wo          : table.config.widgetOptions,
  $header     : $('th'),  // the header cell of the current column
  $row        : $('tr'),  // jQuery object of the row currently being processed
  $cell       : $('td'),  // jQuery object of the cell currently being processed
  text        : 'Batman', // the text from the current cell
  columnIndex : 0         // the column index of the current cell
}

formatter_event

The formatter will update when this event is triggered on the table.

The default setting is 'applyFormatter'

The formatter is set up to run again after an "updateComplete" or "pagerComplete" event fires; this option allows setting a custom-named event to force the formatter to update in addition to the complete events.

* NOTE * So, if the text in the cell gets modified by the formatter, make sure your code saves the original text into the data-attribute or it will get lost.

Force an update as follows:

$('table').trigger('applyFormatter');

Demo

Super Hero	Super Car	Image Links	Added

Superman	Bugatti Veyron	Search The Duck	15 minutes ago
Flash	Hennessey Venom	Search The Duck	2 weeks ago
Batman	Koenigsegg Agera	Search The Duck	5 hours ago
Green Lantern	SSC Ultimate Aero	Search The Duck	just now
Howard the Duck	Koenigsegg CCX	Search The Duck	23 months ago
Wonder Woman	McLaren F1	Search The Duck	3 years ago

Javascript

$(function() {

  $('.tablesorter').tablesorter({
    theme: 'blue',
    widgets: ['formatter', 'filter'],
    widgetOptions: {
      filter_matchType : { 'input': 'match', 'select': 'exact' },
      formatter_column: {
        '.emphasize' : function( text, data ) {
          return '<strong>' + text + '</strong>';
        },
        '.supercar' : function( text, data ) {
          if ( text === '' ) { return ''; }
          // replace table cell with a link
          return '<a href="https://www.google.com/search?tbm=isch&q=' + text.replace(/\s/g, '+') + '">' + text + '</a>';
        },
        '.date' : function( text, data ) {
          var date = new Date( text );
          if ( date instanceof Date && isFinite( date ) ) {
            data.$cell.attr( data.config.textAttribute, text );
            return '<em>' + prettyDate( date ) + '</em>';
          }
          return text;
        },
        '.duckify' : function( text, data ) {
          if ( text === '' ) { return ''; }
          // add text to data-attribute; this overrides the parser
          data.$cell.attr( data.config.textAttribute, text );
          // replace table cell with a link
          return '<a href="https://duckduckgo.com/?ia=images&q=' + text + '">Search The Duck</a>';
        },
        '.blue' : function( text, data ) {
          return '<span class="blue">' + text + '</span>';
        }
      }
    }
  });

});

/*
 * JavaScript Pretty Date (MODIFIED)
 * Copyright (c) 2011 John Resig (ejohn.org)
 * Licensed under the MIT and GPL licenses.
 */
function prettyDate(date) {
  var diff = (((new Date()).getTime() - date.getTime()) / 1000),
    day_diff = Math.floor(diff / 86400);
  if ( isNaN(day_diff) || day_diff < 0 ) { return ''; }
  return day_diff == 0 && (
    diff < 60 && 'just now' ||
    diff < 120 && '1 minute ago' ||
    diff < 3600 && Math.floor( diff / 60 ) + ' minutes ago' ||
    diff < 7200 && '1 hour ago' ||
    diff < 86400 && Math.floor( diff / 3600 ) + ' hours ago') ||
    day_diff == 1 && 'Yesterday' ||
    day_diff < 7 && day_diff + ' days ago' ||
    day_diff < 61 && Math.ceil( day_diff / 7 ) + ' weeks ago' ||
    day_diff < 730 && Math.floor( day_diff / 30 ) + ' months ago' ||
    Math.floor( day_diff / 365 ) + ' years ago';
}

CSS

/* demo styling */
#table strong {
  color: #a00;
}

HTML

<table id="table" class="tablesorter">
  <thead>
    <tr>
      <th class="emphasize filter-exact">Super Hero</th>
      <th class="supercar">Super Car</th>
      <th class="duckify filter-select">Image Links</th>
      <th class="date">Added</th>
    </tr>
  </thead>
  <tbody>
    <!-- Added column dates are dynamically updated for this demo -->
    <tr><td>Superman</td><td>Bugatti Veyron</td><td>Duckie</td><td>3/15/2025 20:35:56</td></tr>
    <tr><td>Flash</td><td>Hennessey Venom</td><td>Horse</td><td>3/6/2025 14:37:36</td></tr>
    <tr><td>Batman</td><td>Koenigsegg Agera</td><td>Elephant</td><td>3/15/2025 15:17:36</td></tr>
    <tr><td>Green Lantern</td><td>SSC Ultimate Aero</td><td>Cow</td><td>3/15/2025 20:50:56</td></tr>
    <tr><td>Howard the Duck</td><td>Koenigsegg CCX</td><td>Pizza</td><td>4/21/2023 10:10:56</td></tr>
    <tr><td>Wonder Woman</td><td>McLaren F1</td><td>Tiger</td><td>1/13/2022 11:4:16</td></tr>
  </tbody>
</table>

tablesorter

Formatter Widget