How to enable sortable table in DokuWiki

DokuWiki's default table is nothing but static HTML table. If you're looking to automatically sort your tables in DokuWiki with your default installation, then you're out of luck. Luckily there are plugins that can help extend DokuWiki's table function.

SortableJS

This plugin will enable sortable table by adding a some JavaScript codes to the page that enables the sorting function..

Installation

You can get the plugin to be installed here;

http://koti.mbnet.fi/oiv/pubtest/sortablejs.zip

You can refer to this article if you're not sure how to install a DokuWiki plugin

How to install plugins in DokuWiki

After you have installed the plugin, it'll take a day (depending on your DokuWiki setting) before you can see the changes, or you can refer to the following article to do it manually.

update-cache

Usage

Basic

To have a sortable table, you just need to wrap your table code with <sortable> and </sortable> tag as the following;

<sortable>
^Column 1^Column 2^Column 3^
|1|Row one|first|
|2|Row two|second|
|3|Row three|third|
</sortable>

It'll sort the table based on the first column and produce the following table as output

Column 1Column 2Column 3
1Row onefirst
2Row twosecond
3Row threethird

Sort by column

To sort by specific column, just column number in the sortable tag's heading. Consider the following example

<sortable 2>
^Column 1^Column 2^Column 3^
|1|Row one|first|
|2|Row two|second|
|3|Row three|third|
</sortable>

The output is as the following, where the table's content is sorted based on the second column.

Column 1Column 2Column 3
1Row onefirst
2Row twosecond
3Row threethird

Sort by column in reverse

Adding r2 to the sortable tag as in the following example will reverse sort the second column.

<sortable r2>
^Column 1^Column 2^Column 3^
|1|Row one|first|
|2|Row two|second|
|3|Row three|third|
</sortable>

Here's the output of the above code.

Column 1Column 2Column 3
1Row onefirst
2Row twosecond
3Row threethird

Dynamic

Clicking on the column's table header will sort the table based on the clicked column. Clicking it again will reverse sort it.