Tristen Brown

A Coder/Designer at MapBox.

Home Blog Github

Projects

    t

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

    # Name Birthday Grocery item Price
    1 Gonzo the Great 12-2-70 Radishes $0.63
    2 Ernie 10/11/69 Fish $12.09
    3 Bert 10/11/1969 Broccoli $0.79
    4 Cookie Monster 1/09/1966 Oreo cookies $2.78
    5 Kermit 12-05-1955 Granola $4.73
    6 Sam the Eagle 04/07/75 Corn dog $5.50

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

    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();
    
    Trumpet Player Born
    Roy Eldridge 1911
    Tim Hagans 1954
    Freddie Hubbard 1938
    Append a row Remove a row

    Ender support

    $ ender add tablesort

    Add tablesort as an internal chain method.

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

    Default style

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

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

    Licence

    MIT

    Bugs?

    File Them