JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css">
<table class="sort">
    <tr>
        <th data-col="test1">one</th>
        <th data-col="test2">two</th>
    </tr>
    <tr>
        <td>1</td>
        <td>B</td>
    </tr>
    <tr>
        <td>3</td>
        <td>A</td>
    </tr>
    <tr>
        <td>2</td>
        <td>C</td>
    </tr>
</table>
<input name="dirc" />
<input name="sort" />

JavaScript

(function ($) {
    $.fn.tableSort = function (options) {
        var settings = $.extend({
            // These are the defaults.
            dirc_input: "undefined", //dirc input selector
            sort_input: "undefined"  //sort input selector
        }, options);
        return this.each(function (options) {
            var $this = $(this);
            $("th", $this).css("cursor", "pointer");
            $this.click(function (e) {
                var $target = $(e.target);
                $target = ($target.is("th"))?$target:$target.closest("th");
                if ($target.is("th")) {
                    var $th = $target,
                        $table = $(this),
                        invs = false,
                        index = $th.index(),
                        trs = $("tr:gt(0)", $table);
                    $th.css({
                        "-webkit-touch-callout": "none",
                            "-webkit-user-select": "none",
                            "-khtml-user-select": "none",
                            "-moz-user-select": "none",
                            "-ms-user-select": "none",
                            "user-select": "none"
                    });
                    $("tr:eq(0) th", $table).not($th).children("span.sort_icon").remove();
                    if ($th.children().length === 0) {
                        $th.append("<span class='sort_icon ui-icon'></span>");
                    }
                    var icon = icon = $(".ui-icon", $th)
                        .css({
                        "float": "right",
                    });
                    if (typeof $th.data("dirc") === 'undefined') {
                        $th.data("dirc", false);
                        icon.addClass("ui-icon-triangle-1-n");
                    } else if ($th.data("dirc") === false) {
                        $th.data("dirc", true);
                        invs = true;
                       ...