JSFiddle - React, Tailwind, and code Playground

by MegaScience

HTML

<script src="http://cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.3/css/jquery.dataTables.css">
<table cellspacing="0" cellpadding="5" border="0" width="100%" class="refItemTable">
    <thead>
        <tr>
            <th id="Strings">Sort Name</th>
            <th id="Numbers">Sort Number</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="refItemCol2">Chamomile Flower</td>
            <td class="refItemCol3">50</td>
        </tr>
        <tr>
            <td class="refItemCol2">Chamomile Flower Oil</td>
            <td class="refItemCol3">500</td>
        </tr>
        <tr>
            <td class="refItemCol2">Chamomile Seed</td>
            <td class="refItemCol3">50</td>
        </tr>
        <tr>
            <td class="refItemCol2">Chamomile Seed Oil</td>
            <td class="refItemCol3">500</td>
        </tr>
        <tr>
            <td class="refItemCol2">Hyssop Flower</td>
            <td class="refItemCol3">50</td>
        </tr>
        <tr>
            <td class="refItemCol2">Hyssop Flower Oil</td>
            <td class="refItemCol3">800</td>
        </tr>
        <tr>
            <td class="refItemCol2">Jasmine Flower</td>
            <td class="refItemCol3">50</td>
        </tr>
        <tr>
            <td class="refItemCol2">Jasmine Flower Oil</td>
            <td class="refItemCol3">350</td>
        </tr>
        <tr>
            <td class="refItemCol2">Jasmine Seed</td>
            <td class="refItemCol3">50</td>
        </tr>
        <tr>
            <td class="refItemCol2">Jasmine Seed Oil</td>
            <td class="refItemCol3">350</td>
        </tr>
        <tr>
            <td class="refItemCol2">Juniper Berry Flower</td>
            <td class="refItemCol3">50</td>
        </tr>
        <tr>
            <td class="refItemCol2">Juniper Berry Flower Oil</td>
            <td class="refItemCol3">800</td>
        </tr>
        <tr>
      ...

CSS

/*thead {
    color: green;
}

tbody {
    color: blue;
}

tfoot {
    color: red;
}

table, th, td {
    border: 1px solid black;
}

th:hover {
    cursor: pointer;
    background: #AAA;
}*/

JavaScript

$('.refItemTable').dataTable( {
        columnDefs: [ {
            targets: [ 0 ],
            orderData: [ 0, 1 ]
        }, {
            targets: [ 1 ],
            orderData: [ 1, 0 ]
        } ]
    } );

/*function isNumeric(num) {
    return !isNaN(num);
}

function sortTable(f, n) {
    var rows = $('.refItemTable tbody  tr').get();

    rows.sort(function (a, b) {

        var A = $(a).children('td').eq(n).text().toUpperCase();
        var B = $(b).children('td').eq(n).text().toUpperCase();

        if (isNumeric(A) || isNumeric(B)) {
            //var A = parseFloat(A);
            //var B = parseFloat(B);
            A = +A;
            B = +B;
            console.log('Numeric: A: ' + A + ' ---- B: ' + B);
        } else {
            //A = A.toUpperCase();
            //B = A.toUpperCase();
            console.log('Text: A: ' + A + ' ---- B: ' + B);
        }

        if (A < B) {
            return -1 * f;
        }
        if (A > B) {
            return 1 * f;
        }
        return 0;
    });

    $.each(rows, function (index, row) {
        $('.refItemTable').children('tbody').append(row);
    });
}
var f_sl = 1;
var f_nm = 1;
$("#Strings").click(function () {
    f_sl *= -1;
    var n = $(this).prevAll().length;
    sortTable(f_sl, n);
});
$("#Numbers").click(function () {
    f_nm *= -1;
    var n = $(this).prevAll().length;
    sortTable(f_nm, n);
});*/