This is the documentation for an older version of Scroll Viewport. Here you can view the most up-to-date version of the Scroll Viewport documentation.

Sorting tables

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.

$page.resources.js
$page.resources.css
$page.resources.require('com.atlassian.confluence.plugins.confluence-sortable-tables:sortable-table-resources')

External script

On help.k15t.com, we use tablesorter, which is based on jQuery. We decided to use this script because it offers many other mechanisms together with sorting, to better display huge sets of data.

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.

  1. Download tablesorter and upload the scripts to your theme
  2. Include the resources in your page.vm

  3. Set up tablesorter as described below

Correct markup

The script requires a table with a thead and 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:

$($('th').parent().parent()).each(function(){
	if ($(this).is('tbody')) {
		var th = $(this).find('th')
		if (th.length != $(this).find('tr:last-child td').length) {
			return
		}
		var tr = th.parent()
		tr.parents('table').prepend('<thead></thead>')
		tr.parents('table').find('thead').append(tr.detach())
	}
})

Then, you can initialize the script for sorting tables:

$('table')
	.tablesorter({
		widgets: ['cssStickyHeaders'],
		widgetOptions : {
			// The zIndex of the stickyHeaders, allows the user to adjust this to their needs
			cssStickyHeaders_zIndex : 300,
			cssStickyHeaders_offset : 100
		}
	})

In the example above, we use cssStickyHeaders to get floating table headers with large scrollable tables. See demo below: