/table-sort

Simple and small standalone javascript html table sorting component.

Primary LanguageJavaScriptMIT LicenseMIT

table-sort

Simple and small standalone javascript html table sorting component.

###Samples

See here for some samples.

###Description

table-sort is one of the smallest javascript components out on the web which adds basic functionality to html tables: sorting. It is completely independent from other javascript libraries but should work side-by-side with libraries like jQuery, etc.

Any html tables which have at least one tr tag can be used (a thead or tbody tag is not mandatory), e.g.

<table id="example">
    <tbody>
        <tr>
            <th>Name</th>
            <th>&Auml;nderungsdatum</th>
            <th>Typ</th>
            <th>Gr&ouml;&szlig;e</th>
        </tr>
        <tr>
            <td>libraries</td>
            <td>08.10.2013 12:38</td>
            <td>Dateiordner</td>
            <td></td>
        </tr>
        <tr>
            <td>views</td>
            <td>08.10.2013 12:38</td>
            <td>Dateiordner</td>
            <td></td>
        </tr>
        <tr>
            <td>css</td>
            <td>18.05.2014 11:08</td>
            <td>Dateiordner</td>
            <td></td>
        </tr>
        <tr>
            <td>.htaccess</td>
            <td>03.06.2013 14:29</td>
            <td>HTACCESS-Datei</td>
            <td>1 KB</td>
        </tr>
        <tr>
            <td>config.php</td>
            <td>03.06.2013 14:29</td>
            <td>PHP-Datei</td>
            <td>3 KB</td>
        </tr>
        <tr>
            <td>blank.html</td>
            <td>18.05.2014 11:08</td>
            <td>HTLM-Datei</td>
            <td>1 KB</td>
        </tr>
    </tbody>
</table>

#####Supported sorting types

Many different column types can be sorted: numbers, text, web addresses, dates and many more. See Javascript Natural Sort Algorithm With Unicode Support for a detailed description of supported sorting types.

###How to use

In the head section of your html file put

<link href='table-sort.css' rel='stylesheet'>

Just before the end of your body section put

<script src='table-sort.min.js'></script>
<script>
  new TableSort(document.getElementById('example'));
</script>

If you don't want to use default options, pass in an options object as second parameter

  new TableResize(document.getElementById('example'), {restoreState: true});

###Options

  • restoreState (default true): localStorage is used to remember the last sorting order if true.

###Supported browsers

  • Internet Explorer 8 and newer
  • Opera
  • Chrome
  • Firefox
  • Safari 5.1.7 (and highly possible newer)

###References

This small javascript component uses or is based on other javascript projects and code snippets:

Licence

MIT