Cannot get Sortable Table to Work (styling looks wrong)

Dear developer community!

I am writing a Jira Server (Jira Server 8.5.x) gadget to list all released versions.
For that I want to use the “sortable tables” component
https://docs.atlassian.com/aui/8.5.1/docs/sortable-table.html

The table is displayed - but I cannot get it to display the expected styling.
It looks like this (on both Chrome and Safari):


(local Jira Software 8.5.1 installation)

I am pretty much out of ideas right now.
Can you tell me what I am doing wrong?

This is the gadget:

To get this working properly I had to import and use jquery.tablesorter.js It is what the AUI Sortable Table uses behind the scenes, but like you I had rendering issue among other things. Note that you should also include the theme.default.css that comes with it for better looks.

So:

<resource type="download" name="jquery.tablesorter.js" location="/js/jquery.tablesorter.js"/>
<resource type="download" name="theme.default.css" location="/css/theme.default.css"/>

In your atlassian-plugin.xml

Then your soy template should look something like:

<table id="dataTableTP" class="aui aui-table-sortable">
     <thead>
		<tr>
			<th class="aui-table-column-issue-key">T</th>
			<th>Key</th>
			<th>CycleTime</th>
			<th>SPs</th>
	 		<th class="aui-table-column-unsortable">Summary</th>
		</tr>
	</thead>

And finally in your AMD / js module:

AJS.tablessortable.setTableSortable(AJS.$("#dataTableTP"));

goes in your, " DashboardItem.prototype.render = function (context, preferences) {" method.