This article demonstrates how to implement sortable tables in a viewport. We have documented two ways of doing this:
- Using Confluence's inbuilt table sorting mechanism
- Using an external script (in this case, tablesorter)
Confluence's inbuilt table sorting mechanism
If you want to use the existing table sorting mechanism that comes with Confluence, simply include the following page resources in the
<head> part of your HTML.
This solution is recommended if your use case requires a more customized solution than what is already provided through Confluence.
For the script to work, you need to include all the resources.
- Download tablesorter and upload the scripts to your theme
Include the resources in your page.vm
- Set up tablesorter as described below
The script requires a table with a
tbody, otherwise it is not possible to sort the columns.
To migrate all older Confluence tables to have the same markup, we use the following script:
Then, you can initialize the script for sorting tables:
In the example above, we use cssStickyHeaders to get floating table headers with large scrollable tables. See demo below: