JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/VivienLN/jquery.ordertable/blob/master/jquery.ordertable.min.js"></script>
<!--
https://github.com/VivienLN/jquery.ordertable
http://www.jqueryscript.net/table/Minimal-jQuery-Plugin-For-Custom-Table-Sorting-ordertable.html

http://www.pipiscrew.com/2015/07/js-jquery-ordertable/
-->

<table border=1px>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>DOB</th>
    </tr>
    <tr>
        <td>Michael</th>
        <td>41</th>
        <td>2001-01-01</td>
    </tr>
    <tr>
        <td>Dwight</th>
        <td>33</th>
        <td>2010-12-20</td>
    </tr>
    <tr>
        <td>Jim</th>
        <td>25</th>
        <td>2015-10-01</td>
    </tr>
</table>

CSS

.order-table { cursor: pointer; }

.order-table:after, .order-table--asc:after, .order-table--desc:after {
  font-size: .7em;
  width: 1em;
  display: inline-block;
}

.order-table:after { content: '▲▼'; }

.order-table--asc:after { content: '▼'; }

.order-table--desc:after { content: '▲'; }

JavaScript

!function(e){var t={};t.init=function(n,s){return s&&!isNaN(s.excludeColumns)&&s.excludeColumns%1===0&&(s.excludeColumns=[s.excludeColumns]),t.options=e.extend({},{buttonClass:"order-table",buttonAscClass:"order-table--asc",buttonDescClass:"order-table--desc",excludeRows:null,excludeColumns:[]},s),n.each(function(){n.is("table")&&t.initTable(e(this))}),n},t.initTable=function(n){var s=t.options,o=e("th",n);for(var r in s.excludeColumns)s.excludeColumns[r]<0&&(s.excludeColumns[r]=o.length+s.excludeColumns[r]);o=o.filter(function(e){for(var t=0;t<s.excludeColumns.length;t++)if(s.excludeColumns[t]==e)return!1;return!0}),n.data("$headings",o),o.addClass(s.buttonClass).click(t.orderToggle)},t.orderToggle=function(){var n=t.options,s=e(this).closest("table").data("$headings"),o=e(this).hasClass(n.buttonAscClass);return s.removeClass(n.buttonAscClass).removeClass(n.buttonDescClass),e(this).addClass(o?n.buttonDescClass:n.buttonAscClass),t.order(this,o)},t.orderAsc=function(){return t.order(this)},t.orderDesc=function(){return t.order(this,!0)},t.order=function(n,s){var o=e(n).closest("th").index(),r=e(n).closest("table");return t.orderColumn(r,o,s)},t.orderColumn=function(n,s,o){var r=e("td:nth-child("+(s+1)+")",n);return r.sort(function(n,s){var r=e(n).attr("data-ordertable-value"),l=e(s).attr("data-ordertable-value"),a="undefined"==typeof r?n.innerText||n.textContent:r,u="undefined"==typeof l?s.innerText||s.textContent:l,i=parseInt(a),c=parseInt(u),d=o?-1:1,C=t.options.excludeRows;return C&&e(n).closest(C).length?-1:C&&e(s).closest(C).length?1:isNaN(i)||isNaN(c)?a.localeCompare(u)*d:(i-c)*d}),r.each(function(){n.append(e(this).closest("tr"))}),!1},t.actionOrder=function(e){e=e||{};var n=e.column,s="desc"===e.order;isNaN(n)||t.orderColumn(this,n,s)},t.actions={order:t.actionOrder},e.fn.extend({orderTable:function(e,n){return"string"==typeof e?(t.actions[e].call(this,n),this):t.init(this,e)}})}(jQuery);

$(document).ready(function() {
    $('table').orderTable();
});