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:
- Sorting is activated using actual links, which are focusable and clickable from the keyboard and by assistive technologies
- The table summary includes an instruction for screen reader users explaining that the table can be sorted by clicking on table headers
- The sort status (ascending, descending) is indicated using an abbreviation element with a title attribute that can be read by screen readers
- 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:
- Include sortabletable.js
- Add class="sortable" to your table(s)
- 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 https://www.dhs.state.il.us/opensource/sortabletable/sortabletable.js
