JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <link rel="stylesheet" href="http://www.PhillipSenn.com/Library/html/Bootstrap/Bootstrap-init.css">
    </head>
    <body>
        <h3>The fiddle is just to show how the buttons behave.  No sorting is actually being performed.</h3>
<table class="sortable table table-striped table-bordered" width="100%">
    <thead>
        <tr>
            <th width="45%" class="btn-group sort-alpha">
                <a class="btn" href="JavaScript:;">Item</a>
                <a class="btn" href="JavaScript:;">
                    <i class="icon-black icon-chevron-up"></i>                </a>            </th>
            <th width="19%" class="btn-group num">
                <a class="btn" href="JavaScript:;">
                    Qty                </a>
                <a class="btn" href="JavaScript:;">
                    <i class="icon-"></i>                </a>            </th>
            <th width="36%" class="btn-group sort-date">
                <a class="btn" href="JavaScript:;">
                    Date                </a>
                <a class="btn" href="JavaScript:;">
                    <i class="icon-"></i>                </a>            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A</td>
            <td class="num">10</td>
            <td>1/1/2013</td>
        </tr>
        <tr>
            <td>B</td>
            <td class="num">30</td>
            <td>1/1/2012</td>
        </tr>
        <tr>
            <td>C</td>
            <td class="num">20</td>
            <td>1/1/2011</td>
        </tr>
    </tbody>
</table>
    </body>
    </html>

JavaScript

!function($, window, undefined) {
    var document = window.document;

    $('table.sortable th.btn-group a').on('click',function() {
        var Ascending = $(this).next().find('i.icon-chevron-up');
        if (Ascending.length) { // They've clicked on the column name next to an icon that has a chevron up.
            if (!Ascending.hasClass('btn-success')) { // It's ascending by default, not by the user locking the column.
                Ascending.removeClass('icon-chevron-up').addClass('icon-chevron-down');
            }
        }
    });
    
    // If you click on the name of the column, it's going to toggle btn-success.
    $('table.sortable th.btn-group a').on('click',function() {
        var myAnchorTag = $(this);
        var myIcon = $(this).next().find('i');
        if (myIcon.length) { // The first anchor tag in each th is the column name.
            if (myAnchorTag.hasClass('btn-success')) { // If it's locked and they click on it, then unlock it.
                myIcon.removeClass('icon-chevron-up icon-chevron-down').addClass('icon-');
            } else if (myIcon.hasClass('icon-chevron-down')) { // It started out ascending by default but now it's descending because they click on the column name.
                myIcon.removeClass('icon-black').addClass('icon-white');
            } else { // It became unlocked and now they're clicking on it again.
                myIcon.removeClass('icon- icon-chevron-down icon-black').addClass('icon-chevron-up icon-white');
            }
            $(this).closest('.btn-group').find('.btn').toggleClass('btn-success');
            $(this).closest('thead').find('th').each(function() {
                if ($(this).find('.btn-success').length) {
                } else {
                    $(this).find('.icon-chevron-up').removeClass('icon-chevron-up').addClass('icon-');
                }
            });
        }
    });
    
    // If you click on a chevron it's going to toggle up/down.  clicking icon- defaults to...