SortableTable is a JavaScript class that makes html tables sortable in a manner that is usable with keyboard commands, large fonts, screen readers, and speech recognition tools, specifically:

  1. Sorting is activated using actual links, which are focusable and clickable from the keyboard and by assistive technologies
  2. The table summary includes an instruction for screen reader users explaining that the table can be sorted by clicking on table headers
  3. The sort status (ascending, descending) is indicated using an abbreviation element with a title attribute that can be read by screen readers
  4. Focus is refreshed whenever sort status is changed, prompting (some) screen readers to read the new information

Example

Alphabetical SortKey Number Money Percent Short Date Long Date None
Doe, John John Doe 100 $10 5% 10/23/1970 October 23, 1970  
Doe, Jane Jane Doe 25   10.5% 11/24/1968 November 24, 1968  
Smith, John John Smith 50 $10.50 10% 2/15/2008 February 15, 2008  
Smith, Jane Jane Smith -10 $20 100%      
Smith, Jack Jack Smith   $50   10/13/2001 October 13, 2001  

Implementation

To make a table sortable:

  1. Include sortabletable.js
  2. Add class="sortable" to your table(s)
  3. And call SortableTable.initAll()

Note: Table header (thead) and footer (tfoot) rows are not sorted. If no thead is present, the script will create one around the first row.

Sort Type

The sort type (alphabetical, numeric, date, or none) can be determined automatically or by setting a class on any column header:

  • class="sort-alpha" - for case-insensitive alphabetical sorting
  • class="sort-number" - for integers, decimals, money ($##.##), and percents (##%)
  • class="sort-date" - for "mm/dd/yyyy" and "month dd, yyyy" format dates (use alpha for "yyyy-mm-dd")
  • class="sort-none"

A custom sort key (value to use for sorting) can be indicated for any data cell by setting a class on the cell:

  • class="sortkey-value" - where value is the value to use for sorting

Styles

The following style rules are suggested:

  • table.sortable .sortLink { display: block; *margin-bottom: 1px; color: #000; text-decoration: none; }
  • table.sortable .sortIcon { padding-left: 3px; vertical-align: 1px; }

Download

SortableTable may be used freely under the terms of the Illinois Open Source License.

Download the script from http://www.dhs.state.il.us/opensource/sortabletable/sortabletable.js