# tablesorter

## Formatter Widget

### Flexible client-side table sorting

Back to documentation

### 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 '' + text + '';
    	}
    }

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 'Get Definition';
    	}
    }

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 | Duckie | 1/1/2015
Flash | Hennessey Venom | Horse | 12/22/2014
Batman | Koenigsegg Agera | Elephant | 3/10/2010
Green Lantern | SSC Ultimate Aero | Cow | 5/5/2012
Howard the Duck | Koenigsegg CCX | Pizza | 1/1/2005
Wonder Woman | McLaren F1 | Tiger | 3/1/2013

# Javascript

# CSS

# HTML