Tablesorter missing arrows with semantic ui

Question

Hi Im trying to use tablesorter with sematic ui. When I use them both the arrow pointers that are normally located to the right of the column name go missing. Normally with table sorter without semantic ui there are those black arros that when you click on them they will show whether the column is sorted in ascending or descending order but with semantic ui theme applied on the table those go missing and Im not sure how to bring them back. Here is example of this behaviour:

https://jsfiddle.net/bbxxomhx/878/

This is sample table im using:

<table id="myTable" class="ui orange celled table tablesorter">
  <thead>
    <tr>
      <th>AlphaNumeric</th>
      <th>Numeric</th>
      <th>Animals</th>
      <th>Sites</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>abc 123</td>
      <td>10</td>
      <td>Koala</td>
      <td>http://www.google.com</td>
    </tr>
    <tr>
      <td>abc 1</td>
      <td>234</td>
      <td>Ox</td>
      <td>http://www.yahoo.com</td>
    </tr>
    <tr>
      <td>abc 9</td>
      <td>10</td>
      <td>Girafee</td>
      <td>http://www.facebook.com</td>
    </tr>
    <tr>
      <td>zyx 24</td>
      <td>767</td>
      <td>Bison</td>
      <td>http://www.whitehouse.gov/</td>
    </tr>
    <tr>
      <td>abc 11</td>
      <td>3</td>
      <td>Chimp</td>
      <td>http://www.ucla.edu/</td>
    </tr>
    <tr>
      <td>abc 2</td>
      <td>56</td>
      <td>Elephant</td>
      <td>http://www.wikipedia.org/</td>
    </tr>
    <tr>
      <td>abc 9</td>
      <td>155</td>
      <td>Lion</td>
      <td>http://www.nytimes.com/</td>
    </tr>
    <tr>
      <td>ABC 10</td>
      <td>87</td>
      <td>Zebra</td>
      <td>http://www.google.com</td>
    </tr>
    <tr>
      <td>zyx 1</td>
      <td>999</td>
      <td>Koala</td>
      <td>http://www.mit.edu/</td>
    </tr>
    <tr>
      <td>zyx 12</td>
      <td>0</td>
      <td>Llama</td>
      <td>http://www.nasa.gov/</td>
    </tr>
  </tbody>
</table>

Answer 1

Because semantic UI replaces the header background image that is included in most themes, you'll need to use the css icon options and header template to add the icon to the header (demo)

$(function() {
  $("#myTable").tablesorter({
    headerTemplate: '{content}{icon}',
    cssIcon: 'icon sort',
    cssIconDesc: 'down',
    cssIconAsc: 'up'
  });
});

Also, make sure you're using semantic UI v2.3.0, I noticed v2.2.2 was used in the demo and the sort arrows weren't displaying correctly.