Boostrap-ish table sorting helper. Inspired by https://github.com/drvic10k/bootstrap-sortable but ended up being a radically simpler design.

table-sorting.html

<table class="sorting">
  <thead>
    <tr>
      <th>Item</th>
      <th data-sorting="natural-dsc">Value</th>
      <th data-sorting="default natural-dsc">Last action</th>
    </tr>
  </thead>
  <tbody>
    {% for item in items %}
    <tr>
      <td>{{ item.name }}</td>
      <td>{{ item.value }}</td>
      <td data-sorting-value="{{ item.timestamp|date:"c" }}">{{ item.action }} at {{ item.timestamp|date:"P, m/d/Y" }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

table-sorting.js

// TODO: follow boostrap Plugin pattern instead?
//       e.g. https://github.com/twbs/bootstrap/blob/9a7e365c2c4360335d25246dac11afb1f577210a/js/tab.js#L113
(function ($) {
  $.tablesort = function () {
      $('table.sorting').each(function () {
        var $table = $(this);
        function doSort() {
            var $col = $(this),
                $icon = $col.find('.sorting-icon'),
                $tbody = $table.find('tbody');
            
            var tgtCell = "td:eq("+$col.index()+")";   // NOTE: we assume no colspans! (and that siblings are all th elements)
            function _val(row) {
                var c = $(row).find(tgtCell),
                    s = c.data('sorting-value') || c.text(),
                    n = parseFloat(s);
                return isNaN(n) ? s : n;
            }
            function _cmp(a,b) {
                return (a < b) ? -1 : ((a > b) ? 1 : 0);
            }
            
            var oldDsc = $icon.hasClass('dsc') ? true : ($icon.hasClass('asc') ? false : null),
                newDsc = (oldDsc === null) ? $col.is('[data-sorting~="natural-dsc"]') : !oldDsc,
                cmpSign = (newDsc) ? -1 : 1;
            $tbody.find('tr').sort(function (rowA, rowB) {
                return cmpSign * _cmp(_val(rowA), _val(rowB));
            }).appendTo($tbody);
            
            $col.siblings().find('.sorting-icon').removeClass('asc').removeClass('dsc');
            if (newDsc) {
              $icon.removeClass('asc').addClass('dsc');
            } else {
              $icon.addClass('asc').removeClass('dsc');
            }
            $table.trigger('sorted');
        }
        $table.find('thead th:not([data-sorting~="disabled"])').on('click', doSort).append("<span class=sorting-icon></span>");
        $table.find('thead th[data-sorting~="default"]').click();
      });
  };
  $($.tablesort);
}(jQuery));

table-sorting.less

table.sorting thead th:not([data-sorting~=disabled]) {
  cursor: pointer;
  position: relative;
  top: 0;
  left: 0;
  &:hover {
    background: #efefef;
  }
  
  .sorting-icon {
    &::after {
      color: grey;
      float: right;
    }
    &.asc::after {
      content: "▲";
    }
    &.dsc::after {
      content: "▼";
    }
  }
}