tablesort a small & simple sorting component for tables. Written in Javascript and dependency free.

<script src='tablesort.min.js'></script>

<!-- Include sort types you need -->
<script src='tablesort.number.js'></script>
<script src='tablesort.date.js'></script>

<script>
  new Tablesort(document.getElementById('table-id'));
</script>

Ascending/Descending

You can pass an alternate sort order as a second parameter. By default sort is ascending. To change this, set:

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

Note: If you are using the default CSS provided you'll need to reverse the class names that style the arrows.

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>

Specify the sort method for a column

By adding a data-sort-method attribute to a table heading you can force Tablesort to use a specific sorting method rather than guessing it. The value of data-sort-method corresponds to the name of a sort function.

<table>
  <thead>
    <tr>
      <th>Number</th>
      <th data-sort-method='dotsep'>Version</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>3.7.2004</td>
    </tr>
    <tr>
      <td>2</td>
      <td>1.08.2013</td>
    </tr>
  </tbody>
</table>

Events

Tablesort supports two custom events beforeSort & afterSort.

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

table.addEventListener('beforeSort', function() {
  alert('Table is about to be sorted!');
});

table.addEventListener('afterSort', function() {
  alert('Table sorted!');
});

Name	Born
Roy Eldridge	1911
Tim Hagans	1954
Freddie Hubbard	1938

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();

Name	Born
Roy Eldridge	1911
Tim Hagans	1954
Freddie Hubbard	1938

Append a row Remove a row

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'>Born</th>

Name	Born
Roy Eldridge	1911
Tim Hagans	1954
Freddie Hubbard	1938

th.sort-header::-moz-selection { background:transparent; }
th.sort-header::selection      { background:transparent; }
th.sort-header { cursor:pointer; }
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;
  }