Sortable HTML Tables with Markdown

Here is a short description how to get sortable HTML tables in a markdown environment which supports tables (as Nikola does).

Table creation

So first of all you need a markdown table which you want to make sortable. Let's take this markdown table:

| Tour            | Height (m)  | Discipline     | Date      | Mountain Range |
|-----------------|-------------|----------------|-----------|----------------|
| Monte Cevedale  | 3769        | Hochtour       | 2006/08   | Ortler Alpen   |
| Piz Morteratsch | 3751        | Hochtour       | 2005/09   | Bernina        |
| Ellmauer Halt   | 2344        | Klettersteig   | 2004/07   | Wilder Kaiser  |

And the result should look something like this:

Tour Height (m) Discipline Date Mountain Range
Monte Cevedale 3769 Hochtour 2006/08 Ortler Alpen
Piz Morteratsch 3751 Hochtour 2005/09 Bernina
Ellmauer Halt 2344 Klettersteig 2004/07 Wilder Kaiser

Adding additional Javascript Files

If you want to make this table sortable, an additional Javascript is needed. In my case I have choosen the library from kryogenix:

kryogenix.org/code/browser/sorttable

The main problem is, that you have to add a "class=sortable" attribute to the generated table. This is currently not possible with markdown.

The solution is to call a small Javascript at the end of the table, which adds the needed attribute. In my case the solution is based on jQuery.

You have to ensure that the additional Javascript files (jquery.min.js and sorttable.js) are added to the project. In the case of Nikola this is done with the variable EXTRA_HEAD_DATA in the conf.py file of the project:

EXTRA_HEAD_DATA = """
<script type="text/javascript" src="/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="/assets/js/sorttable.js"></script>
"""

Some CSS tweaking

I added some custom css statements for a better visualization of my table. Here they are:

table.sortable thead {
    background-color:#eee;
    color:#112233;
    font-weight: bold;
    cursor: default;    
}

table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 
    content: " \25B4\25BE" 
}

The last css statement is reponsible for always displaying the arrows in the column header. This signals to the user that this table is dynamic (see kryogenix.org/code/browser/sorttable/#symbolsbeforesorting).

The final result

The final markdown code:

| Tour            | Height (m)  | Discipline     | Date      | Mountain Range|
|-----------------|-------------|----------------|-----------|---------------|
| Monte Cevedale  | 3769        | Hochtour       | 2006/08   | Ortler Alpen  |
| Piz Morteratsch | 3751        | Hochtour       | 2005/09   | Bernina       |
| Ellmauer Halt   | 2344        | Klettersteig   | 2004/07   | Wilder Kaiser |

<script>$( "table" ).last().addClass( "sortable" );</script>

And the resulting table:

Tour Height (m) Discipline Date Mountain Range
Monte Cevedale 3769 Hochtour 2006/08 Ortler Alpen
Piz Morteratsch 3751 Hochtour 2005/09 Bernina
Ellmauer Halt 2344 Klettersteig 2004/07 Wilder Kaiser