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>

### 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>20</td>
      </tr>
      <tr>
        <td>Bread</td>
        <td>Out of stock</td>
        <td>10</td>
      </tr>
      <tr>
        <td>Radishes</td>
        <td>In Stock!</td>
        <td>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