Adding updown/up/down icons to tablesorter table

Question

What's the minimal solution to add a clickable updown/up/down icon to the header of each sortable column of a tablesorter table e.g. https://web.archive.org/web/20170112030141/http://jsfiddle.net/fu12ye88/ (pic) ?

All I've found are solutions requiring a relatively large additional libraries e.g. https://web.archive.org/web/20170112030034/http://jsfiddle.net/Mottie/abkNM/325/

Answer 1

If you go to the docs you'll find lots of ways to customize your sorted table.

I took the css out of the given example (https://mottie.github.io/tablesorter/) and applied some of it to your fiddle and the result is exactly what you want:

.tablesorter-default .header,
.tablesorter-default .tablesorter-header {
  background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
  padding: 4px 20px 4px 4px;
  background-repeat: no-repeat;
  background-position: center right;
}

.tablesorter-default thead .headerSortUp,
.tablesorter-default thead .tablesorter-headerAsc,
.tablesorter-default thead .tablesorter-headerSortUp {
  background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
}

.tablesorter-default thead .headerSortDown,
.tablesorter-default thead .tablesorter-headerDesc,
.tablesorter-default thead .tablesorter-headerSortDown {
  background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
}