JSFiddle - React, Tailwind, and code Playground

HTML

<button id="create">Create</button>
<button id="destroy">Destroy</button>
<button id="sort">Sort</button>
<table id="myTable" class="myTable">
    <thead>
        <tr>
            <th class="col1">Header 1</th>
            <th class="col2">Header Two</th>
            <th class="col3">Head 3</th>
            <th class="col4">Header 4</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Footer One</td>
            <td>Foot 2</td>
            <td>Footer 3</td>
            <td>Footer Four</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Circus</td>
            <td>Alphabet</td>
            <td>Family</td>
            <td>-51</td>
        </tr>
        <tr>
            <td>Junk</td>
            <td>Desk</td>
            <td>Drink</td>
            <td>37</td>
        </tr>
        <tr>
            <td>Rock</td>
            <td>Chocolates</td>
            <td>Sandwich</td>
            <td>-59</td>
        </tr>
        <tr>
            <td>Banana</td>
            <td>Umbrella</td>
            <td>Library</td>
            <td>-32</td>
        </tr>
        <tr>
            <td>Fork</td>
            <td>Library</td>
            <td>Electricity</td>
            <td>31</td>
        </tr>
        <tr>
            <td>Salt</td>
            <td>Gemstone</td>
            <td>Game</td>
            <td>64</td>
        </tr>
        <tr>
            <td>Earth</td>
            <td>Clock</td>
            <td>Clown</td>
            <td>-98</td>
        </tr>
        <tr>
            <td>Space Shuttle</td>
            <td>Planet</td>
            <td>Horoscope</td>
            <td>-19</td>
        </tr>
        <tr>
            <td>Aeroplane</td>
            <td>Saddle</td>
            <td>Fungus</td>
            <td>-29</td>
        </tr>
        <tr>
            <td>Surveyor</td>
            <td>Drink</td>
            <td>Meat</td>
            <td>19</td>
        </tr>
        <tr>
            <td>Train</td>
            <td>Chess...

CSS

.sortfixedtable-odd {
    background-color: #CCCCCC;
    color:#6600CC;
}
.sortfixedtable-even {
    background-color: #EEEEEE;
    color:#CC0066;
}
th.sortfixedtable-sortable {
    cursor: pointer;
}
th.sortfixedtable-sortable span {
    padding-right: 10px;
    /*Override padding-right to allow for image*/
    background-image: url("http://tapmeister.com/test/sortfixedtable/bg.gif");
    background-position:right center;
    background-repeat: no-repeat;
}
th.sortfixedtable-decending span {
    background-image: url("http://tapmeister.com/test/sortfixedtable/desc.gif");
}
th.sortfixedtable-accending span {
    background-image: url("http://tapmeister.com/test/sortfixedtable/asc.gif");
}
td, th {
    text-align:left;
    border:1px solid black;
}
.myTable {
    width:600px;
}
.myTable th.col2 {
    width:100px;
}
.myTable th.col3 {
    width:100px;
}
.myTable th.col4 {
    width:100px;
}

JavaScript

$(function () {
    $('#create').click(function () {
        $('#myTable').sortfixedtable({
            'height': '300', //Height of tbody in pixals (not total table!).  Don't include px
            'myclass': 'myTableParent',
                'autoSort': 3,
                'sortAll': false, //Defaults to sorting all columns
            'sort': {
                0: true,
                1: true,
                3: true
            } //Sort indexes.  Reverses sortAll
        });
    });

    $('#destroy').click(function () {
        $('#myTable').sortfixedtable('destroy');
    });

    $('#update').click(function () {
        $('#myTable').sortfixedtable('update');
    });

    $('#sort').click(function () {
        $('#myTable').sortfixedtable('sort', 1);
    });
});

/*
 * jQuery sortfixedtable
 * Copyright 2012 Michael Reed
 * Dual licensed under the MIT and GPL licenses.
 *
 * Notes
 * Style table directly using CSS. Targetting table using ID will not apply to thead and tfoot, therefore use class instead.
 * Note that your table width will increate by approximately 17px to account for scroll bar.
 * Note that your table width might also increase if you add padding to sortfixedtable-sortable or similar.
 * Options are desired table height without px (height), optional class to apply to parent div (myClass), whether all columns are sortable (sortAll), and override on individual columns (sort)
 * Tables with colspan will have problems is sorting is required left of the colspan
 */ (function ($) {

    var methods = {
        init: function (options) {
            //console.log('init');

            // Create some defaults, extending them with any options that were provided
            var settings = $.extend({
                'height': '100', //Height of tbody in pixals (not total table!).  Don't include px
                'myclass': null, //Applies custom class to the parent DIV so user may override
                'noText': {}, //The column has no text or number...