$ npm install sorter
Creates a simple svg image with three states and appends it to each column:
var sorter = require'sorter';sorter'#table-id'on'sort'//table is the table element//column header is the `<th>` element//direction is either `'up'` or `'down'`on'clear'//return to default sorting
var TableSorter = require'sorter'
Add sorters to the
table, which can either be a selector string that selects a single element, or an element.
options is an optional object with the following properties:
|th||string||A selector, relative to the table element, for a collection of table headers (or an array of table headers)|
|sortControl||function||SVG up-down arrow||This is a function that returns a |
|sorter||string||A class to be added to the sorter|
|up||string||A class to be added to the sorter when it is pointing up|
|down||string||A class to be added to the sorter when it is pointing down|
|upArrow||string||A class to be added to the sorter's up arrow|
|downArrow||string||A class to be added to the sorter's down arrow|
The following CSS is also added to the page (and can be overriden in your own CSS)
Table sorter emits the following events:
Each get the
table element as their first argument. The
'sort' event additionally gets the
Direction is a string and either'up'
Update the table so that the given header is sorted in the given direction. If no direction is provided this acts as a toggle. If
'sort' event is not emitted.
Remove all sorting from the table. If
'clear' event is not emitted.
You can return a custom
SortControl from the
sortControl function to replace the default up-down arrow implementation. It must have
clear as methods.
For example, if you wanted to just have the text
(down) instead of up and down arrows, you could try something like the following.
var sorter = require'sorter'var el = nullclearel = documentcreateTextNode' (up)'thappendChildelclearel = documentcreateTextNode' (down)'thappendChildelif elthremoveChildelel = nullreturn up: up down: down clear: clearsorter'#table-id' sortControl: sortControl
Note that if all you wanted to do was modify something like the colour, you'd be better off just adding some CSS using the default styles.