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

# Name Birthday Grocery item Price Version Filesize
1 Gonzo the Great 12-2-70 Radishes $0.63 31.0.1650.57 124k
2 Ernie 10/11/69 Fish $12.09 11.0.1 134.56 GB
3 Bert 10/11/1969 Broccoli $0.79 18.0.1284.49 134 B
4 Cookie Monster 1/09/1966 Oreo cookies $2.78 3.0.0 4.13 TiB
5 Kermit 12-05-1955 Granola $4.73 3.0.9 12 YB
6 Sam the Eagle 04/07/75 Corn dog $5.50 3.1.2 19.4 K
Latest release Development version
tablesort on GitHub

Quick start

<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>

Sort types

See all available sort types in the sort directory of the project. Defaults to string if no sort types are provided.

Additional options

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 attribute data-sort-method='none' to a columns th or a tr element.

<th data-sort-method='none'>Name</th>

<tr data-sort-method='none'>
  <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>

You can use a custom attribute (instead of data-sort) using the sortAttribute option:

var table = document.getElementById('table-id');
var sort = new Tablesort(table, { sortAttribute: 'data-custom-sort-val'});

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>

Specify which table heading row enables sorting

If you have two or more table heading rows you can specify the one that enables sorting by adding a data-sort-method='thead' attribute to desired <tr> element.

<table>
  <thead>
    <tr data-sort-method='thead'><th>Sort Row</th></tr>
    <tr><th>Not Sort Row</th></tr>
  </thead>
  <tbody>
    <tr><td>2</td></tr>
    <tr><td>1</td></tr>
    <tr><td>3</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 data-sort-default attribute.

<th data-sort-default>Born</th>
Name Born
Roy Eldridge 1911
Tim Hagans 1954
Freddie Hubbard 1938

Sorting by column keys

Sometimes, tables can have more complex column structures, especially when using colspans. In these cases, you can explicitly connect a header to the cells in each row that it should sort by, by using the data-sort-column-key attribute.

This example sorts products by price, even though the prices are not in the same column as their header.

<table class='sort'>
<thead>
  <tr>
    <th>Product</th>
    <th colspan="2" data-sort-column-key="price">Price</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Apples</td>
    <td>Sale!</td>
    <td data-sort-column-key="price">20</td>
  </tr>
  <tr>
    <td>Bread</td>
    <td>Out of stock</td>
    <td data-sort-column-key="price">10</td>
  </tr>
  <tr>
    <td>Radishes</td>
    <td>In Stock!</td>
    <td data-sort-column-key="price">30</td>
  </tr>
</tbody>
</table>
Product Price
Apples Sale! 20
Bread Out of stock 10
Radishes In Stock! 30

CSS styling

Add the styling from tablesort.css file to your CSS or roll with your own.

Licence

MIT

Bugs?

File Them