# tablesorter

## headerTitles Widget

### Flexible client-side table sorting

Back to documentation

### Notes

- In 2.15.7,
  - Sorry for all of these breaking changes, I should have left this widget in beta.
  - The `headerTitle_prefix`, `headerTitle_text`, `headerTitle_numeric` options has been replaced, in lieu of the new ouput options; sorry for no deprecation notice.
  - Added `headerTitle_useAria`, `headerTitle_tooltip`, `headerTitle_output_sorted`, `headerTitle_output_unsorted`, `headerTitle_output_nosort`, `headerTitle_cur_text`, `headerTitle_cur_numeric`, `headerTitle_nxt_text`, `headerTitle_nxt_numeric`, `headerTitle_type` & `headerTitle_callback` options. See the options section below for more details.
  - Added `"refreshHeaderTitle"` method to force the widget to update.
- This widget adds a title to the table headers when they are sorted.
- Click on any header. You may have to move the mouse off, then back on the header to see the title appear.
- This widget will not work with the original tablesorter plugin (v2.0.5).
- The examples uses the tipsy jQuery plugin

### Options

Option | Default | Description
--- | --- | ---
headerTitle_useAria | `false` | When `true`, the headers titles are extracted from the `aria-label`. The text in that label is built from the `$.tablesorter.language` option.

headerTitle_tooltip

`""`

Add a (tooltip) class name to the header, yeah you could have used the `cssHeader` option to do the same thing, but this option allows adding classes using an array.

    headerTitle_tooltip : [ 'tooltip-text', 'tooltip-text', 'tooltip-numeric', 'tooltip-numeric', '', 'tooltip-text']

headerTitle_cur_text
headerTitle_cur_numeric

(see description)

When any of the header title output options use the `{current}` tag, it is replaced by values from either the current ("cur") text or numeric option array as determined by the column unsorted state or sort direction.
The array must contain text for ascending, descending and unsorted state (in that order). Defaults:

    headerTitle_cur_text     : [ ' sort: A - Z', ' sort: Z - A', 'ly unsorted' ],
    headerTitle_cur_numeric  : [ ' sort: 0 - 9', ' sort: 9 - 0', 'ly unsorted' ]

headerTitle_nxt_text
headerTitle_nxt_numeric

(see description)

When any of the header title output options use the `{next}` tag, it is replaced by values from either the next ("nxt") text or numeric option array as determined by the column unsorted state or sort direction.
The array must contain text for when the next state is ascending, descending and unsorted (in that order). Defaults:

    headerTitle_nxt_text     : [ ' sort: A - Z', ' sort: Z - A', 'remove sort' ],
    headerTitle_nxt_numeric  : [ ' sort: 0 - 9', ' sort: 9 - 0', 'remove sort' ]

headerTitle_output_sorted
headerTitle_output_unsorted
headerTitle_output_nosort

(see description)

Set the output string for each sort condition: sorted, unsorted or sorting disabled.
Each of these option strings can include a `{name}`, `{current}` and `{next}` tag.

- The `{name}` tag is replaced by the header text.
- The `{current}` tag is replaced by the type-appropriate text from either the `headerTitle_cur_text` or `headerTitle_cur_numeric` option.
- The `{next}` tag is replaced by the type-appropriate text from either the `headerTitle_nxt_text` or `headerTitle_nxt_numeric` option.

Defaults:

    headerTitle_output_sorted   : 'current{current}; activate to {next}',
    headerTitle_output_unsorted : 'current{current}; activate to {next} ',
    headerTitle_output_nosort   : 'No sort available'

Note: the reason "activate" is used instead of "click" is because the user can also `Tab` to the header cell and press `Enter` to initiate a sort.

headerTitle_type

`[]`

Each column type is determined by the parser `type` value. So, if you want to override a column default type, set this option with an array with the specified column changed to either "text" or "numeric". This is useful when a date column shows as a numeric sort, but you want your users to see it as a text sort.
As seen in the second table initialization code below, if an array element is undefined or an empty string, it will not override the default type.

    headerTitle_type : ['', '', '', '', '', 'text']

headerTitle_callback

`null`

This callback function is executed after the title text string has completed processing. Any additional changes, or modifications can be done within this function. This function has two parameters `$cell` (the header cell as a jQuery object), and the processed text (`txt`). The function must return the text!

    headerTitle_callback : function($cell, txt) {
        return txt;
    }

In this demo, you will notice that this function is used to dynamically update the tooltip.

### Method

### Force headerTitle widget update

If you need to programmically force the header title to update, trigger a `refreshHeaderTitle` event on the table:

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

In this demo, this method is used when switching between the default header title and aria-label text.

# Demo

### Tooltip plugin using togglable aria-label text

: true

First Name | Last Name | Age | Total | Discount | Date
--- | --- | --- | --- | --- | ---
Peter | Parker | 28 | $9.99 | 20% | Jan 18, 2001 9:12 AM
John | Evans | 33 | $9.99 | 25% | Dec 10, 2002 5:14 AM
Clark | Kent | 22 | $15.89 | 44% | Jan 12, 2003 11:14 AM
Bruce | Almighty | 45 | $15.89 | 44% | Jan 18, 2001 9:12 AM
Bruce | Evans | 22 | $13.19 | 11% | Jul 6, 2006 8:14 AM

### Tooltip plugin with alternative titles

First Name | Last Name | Age | Total | Discount | Date
--- | --- | --- | --- | --- | ---
Peter | Parker | 28 | $9.99 | 20% | Jan 18, 2001 9:12 AM
John | Evans | 33 | $9.99 | 25% | Dec 10, 2002 5:14 AM
Clark | Kent | 22 | $15.89 | 44% | Jan 12, 2003 11:14 AM
Bruce | Almighty | 45 | $15.89 | 44% | Jan 18, 2001 9:12 AM
Bruce | Evans | 22 | $13.19 | 11% | Jul 6, 2006 8:14 AM

### No Tooltip Plugin

First Name | Last Name | Age | Total | Discount | Date
--- | --- | --- | --- | --- | ---
Peter | Parker | 28 | $9.99 | 20% | Jan 18, 2001 9:12 AM
John | Evans | 33 | $9.99 | 25% | Dec 10, 2002 5:14 AM
Clark | Kent | 22 | $15.89 | 44% | Jan 12, 2003 11:14 AM
Bruce | Almighty | 45 | $15.89 | 44% | Jan 18, 2001 9:12 AM
Bruce | Evans | 22 | $13.19 | 11% | Jul 6, 2006 8:14 AM

# Javascript