tablesort

A small & simple sorting component for tables written in Javascript.

Basic usage

<script src='tablesort.min.js'></script>
<script>
  new Tablesort(document.getElementById('table-id'));
</script>

Sort Types

• strings
• numbers
• currency
• Basic dates in dd/mm/yy or dd-mm-yy format. Years can be 4 digits. Days and Months can be 1 or 2 digits.

Additional options

Ascending/Descending

You can pass in options as a second parameter. Currently one option is supported: descending: true. By default, sort is set to ascending.

new Tablesort(document.getElementById('table-id'), {
  descending: true
});

Exclude columns or rows

For columns or rows that do not require sorting, you can add a class of no-sort to a columns th or a tr element.

<th class='no-sort'>Name</th>

<tr class='no-sort'>
  <td>1</td>
  <td>Gonzo the Great</td>
  <td>12-2-70</td>
  <td>Radishes</td>
  <td>$0.63</td>
</tr>

Override data that is sorted on

Sometimes text inside cells is not normalized. Using a data-sort attribute you can use optional data to sort on.

<tr>
  <td>1</td>
  <td data-sort='1357656438'>01/08/13 @ 8:47:18am EST</td>
</tr>
<tr>
  <td>2</td>
  <td data-sort='1078673085'>3/7/2004 @ 9:24:45 EST</td>
</tr>

Default sort on tablesort initialization

It is possible to automatically sort the table once you create a Tablesort instance by adding sort-default class.

<th class='sort-default'>Name</th>

Refresh sort on appended data

Tablesort supports sorting when new data has been added. Simply call the refresh method.

var table = document.getElementById('table-id');
var sort = new Tablesort(table);

// Make some Ajax request to fetch new data and on success:
sort.refresh();

See homepage for example

Node/Browserify

// npm install tablesort
var tablesort = require('tablesort');

tablesort(el, options);

Ender support

Add tablesort as an internal chain method to your Ender compilation.

// ender add tablesort

$('.table').tablesort();

Default style

Add the styling below to your CSS or roll with your own.

th.sort-header::-moz-selection { background:transparent; }
th.sort-header::selection      { background:transparent; } 
th.sort-header {
  cursor:pointer;
  }
th.sort-header::-moz-selection,
th.sort-header::selection {
  background:transparent;
  }
table th.sort-header:after {
  content:'';
  float:right;
  margin-top:7px;
  border-width:0 4px 4px;
  border-style:solid;
  border-color:#404040 transparent;
  visibility:hidden;
  }
table th.sort-header:hover:after {
  visibility:visible;
  }
table th.sort-up:after,
table th.sort-down:after,
table th.sort-down:hover:after {
  visibility:visible;
  opacity:0.4;
  }
table th.sort-up:after {
  border-bottom:none;
  border-width:4px 4px 0;
  }

Building

Tablesort relies on Grunt as its build tool. Simply run grunt to package code from any contributions you make to src/tablesort.js before submitting pull requests.

Licence

MIT

Tests

npm test

Bugs?

Create an issue