wardrop / sorted.js Goto Github PK

Sorted.js is a replacement for the popular but dated Sorttable.js. It's only purpose is to make sorting HTML tables as simple and easy as possible, with the bonus of also allowing specificed columns to be resized.

It's designed to gracefully handle any changes made to the table it's bound to, e.g. adding or removing columns and rows, changing values.

Include sorted.js somewhere in your page:

<script type="text/javascript" src="sorted.js"></script>

Give it a table element to bind to:

// Ensure `mytable` exists before calling
new Sorted(document.getElementById("mytable"))

And finally, be sure to add come CSS to provide some visual feedback, or use the included stylesheet:

<link rel="stylesheet" type="text/css" href="sorted.css">

• Designed to handle dynamic changes to table columns, rows and cells.
• No dependencies
• No hardcoded CSS
• No DOM injection.
• Sorts tables with multiple elements, sorting each as it's own independent collection.
• Column resize capability

Sorted.js works on all modern browsers. IE11 is also supported, though the included CSS doesn't work too well with IE11.

To exclude a column from being sortable, add the data-no-sort attribute to the column header.

<th data-no-sort>Comments</th>

Sorted.js will guess an appropriate sort function based on the first value for each column, though you'll likely want to specify the sort function to use for certain columns. The available sort functions are:

• sortAlpha - Sorts the column alphabetically.
• sortNumeric - Sorts the column numerically. Strips non-numeric characters as to support a wide range of number formatting.
• sortNatural - A combination of sortAlpha and sortNumeric, sorting numbers numerically rather than alphabetically. Stricter than sortNumeric when determining what is considered a number.
• sortDate - Parses column values as dates and sorts accordingly.

If the values in the table cells aren't appropriate for sorting, you can define an alternate sorting value by setting the data-sort-value attribute on the table cell.

<td data-sort-value="200">Two-hundred</td>
<td data-sort-value="11">Eleven</td>
<td data-sort-value="3000">Three-thousand</td>

For each column you would like to change the default sort direction for, simply preset the data-sort-state attribute on the column header:

<th data-sort-state="sorted">My Column</th>

This will make Sorted.js believe it's already sorted that column ascendingly, and will therefore reverse sort it the next time it's clicked.

To make a column resizable, add the data-resizable attribute to the column header.

<th data-resizable>My Resizable Column</th>

If you'd like the resize handle to be bigger, set the resizeHandleWidth option to your desired width when instantiating Sorted.js. Be sure to update the stylesheet to match.

new Sorted(document.getElementById("mytable"), {resizeHandleWidth: 8})

To sort the table on load, or otherwise trigger sorting programmatically (i.e. not on click), call .sort(), like so:

var sorted = new Sorted(document.getElementById("mytable"))
sorted.sort(1) // Sorts the second column

Or...

var myTable = document.getElementById("mytable")
new Sorted(myTable)
myTable.sorted.sort(1) // Sorts the second column

The best way to keep certain rows at the top or bottom of your table, is to use semantic HTML. Anything you want to stay at the top should be put in , and anything you want to stay at the bottom of your table should be placed in . Sorted.js only sorts rows within .

Please use Github's Issues tab to ask questions, report issues, or provide feedback and suggestions.