Sortable – A (tiny) table sorter, written in vanilla JavaScript

Sortable

The Vanilla Sortable JavaScript allows you to order your tables by clicking on the respective table header. It is lightning fast, except on really huge tables of course. The smallest version of the script is 634 Bytes (minified) light and just need to be linked within your document. Sortable is compatible with all modern browsers, including 9+.

The Script requires at least a thead and a tbody container (tfoot isn’t involved). It will also remove all your EventListeners (not inline JS Code) from the table rows! Attach your events to the main table container, for example, to keep your listeners alive.

Download the latest version of Sortable as .ZIP or as .TAR package!

Instructions

The Package itself contains the main JavaScript, also in a minified version. A “advanced” and “mega-advanced” edition contains more functionallity, but aren’t available minified. There is also a demonstration Stylesheet, also included as Minified and SCSS Version!

 

Load Sortable

Easy include the Stylesheet within the HTML header and load the Sortable Script wherever you want. We recommend to link the second file directly after the opened <body> tag. The script itself contains no settings, but is available in 3 edition: “Default”, “Advanced” and “Mega Advanced”.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        
        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/sortable.css" />
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/sortable.min.js"></script>
    </body>
</html>

 

Use Normal Edition

The normal edition doesn’t allow any configurations or settings. It just makes any table sortable, which has “sortable” as class name!

<!-- Required JavaScript -->
<script type="text/javascript" src="/js/sortable.min.js"></script>

<!-- Example Structure -->
<table class="sortable">
    <thead>
        <tr>
            <th><!-- Your THead Header --></th>
            <th><!-- Your THead Header --></th>
            <th><!-- Your THead Header --></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><!-- Your Value --></td>
            <td><!-- Your Value --></td>
            <td><!-- Your Value --></td>
        </tr>
    </tbody>
</table>

 

Use Advanced Edition

The advanced edition adds a custom data-sort attribute to the single table cells, which allows to “manipulate” the configuration order. If no attribute is given they normal value will be used instead.

<!-- Required JavaScript -->
<script type="text/javascript" src="/js/sortable.advanced.js"></script>

<!-- Example Structure -->
<table class="sortable">
    <thead>
        <tr>
            <th><!-- Your THead Header --></th>
            <th><!-- Your THead Header --></th>
            <th><!-- Your THead Header --></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-sort="a"><!-- Your Value --></td>
            <td data-sort="1"><!-- Your Value --></td>
            <td data-sort="1"><!-- Your Value --></td>
        </tr>
    </tbody>
</table>

 

Use Mega-Advanced Edition

The Mega-Advanced edition contains the same functionallity as the Advanced edition. But it allows also to sort according to a “Data Size” (such as GB, MB, kB), by using the class name size on the respective TH element. The “Weird” data format MM/DD/YYYY requires the class name date.

<!-- Required JavaScript -->
<script type="text/javascript" src="/js/sortable.advanced.js"></script>

<!-- Example Structure -->
<table class="sortable">
    <thead>
        <tr>
            <th><!-- Your THead Header --></th>
            <th><!-- Your THead Header --></th>
            <th class="size"><!-- Size THead Header --></th>
            <th class="date"><!-- Date THead Header --></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-sort="a"><!-- Your Value --></td>
            <td data-sort="1"><!-- Your Value --></td>
            <td><!-- Data Sizes Format --></td>
            <td><!-- Weird Date Format --></td>
        </tr>
    </tbody>
</table>

 

Leave a Reply

Top