JSFiddle - React, Tailwind, and code Playground

HTML

<title>Scrollable HTML table</title>
<body>
    <table cellspacing="1" cellpadding="2" class="" id="myTable1" width="400">
        <thead>
            <tr>
                <th class="c1">Name</th>
                <th class="c2">Surename</th>
                <th class="c3">Age</th>
            </tr>
        </thead>
        <tbody>
            <tr class="r1">
                <td class="c1">John</th>
                    <td class="c2">Smith</th>
                        <td class="c3">30</th>
            </tr>
            <tr class="r2">
                <td class="c1">John</th>
                    <td class="c2">Smith</th>
                        <td class="c3">31</th>
            </tr>
            <tr class="r1">
                <td class="c1">John</th>
                    <td class="c2">Smith</th>
                        <td class="c3">32</th>
            </tr>
            <tr class="r2">
                <td class="c1">John</th>
                    <td class="c2">Smith</th>
                        <td class="c3">33</th>
            </tr>
            <tr class="r1">
                <td class="c1">John</th>
                    <td class="c2">Smith</th>
                        <td class="c3">34</th>
            </tr>
            <tr class="r2">
                <td class="c1">John</th>
                    <td class="c2">Smith</th>
                        <td class="c3">35</th>
            </tr>
            <tr class="r1">
                <td class="c1">John</th>
                    <td class="c2">Smith</th>
                        <td class="c3">36</th>
            </tr>
            <tr class="r2">
                <td class="c1">John</th>
                    <td class="c2">Smith</th>
                        <td class="c3">37</th>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th class="c1">Name</th>
                <th class="c2">Surename</th>
                <th class="c3">Age</th>
            </tr>
        </tfoot>
    </table>

CSS

table {
     text-align: left;
     font-size: 12px;
     font-family: verdana;
     background: #c0c0c0;
 }
 table thead {
     cursor: pointer;
 }
 table thead tr, table tfoot tr {
     background: #c0c0c0;
 }
 table tbody tr {
     background: #f0f0f0;
 }
 td, th {
     border: 1px solid white;
 }

JavaScript

var t = new SortableTable(document.getElementById('myTable1'), 100);

 function SortableTable(tableEl) {

     this.tbody = tableEl.getElementsByTagName('tbody');
     this.thead = tableEl.getElementsByTagName('thead');
     this.tfoot = tableEl.getElementsByTagName('tfoot');

     this.getInnerText = function (el) {
         if (typeof (el.textContent) != 'undefined') return el.textContent;
         if (typeof (el.innerText) != 'undefined') return el.innerText;
         if (typeof (el.innerHTML) == 'string') return el.innerHTML.replace(/<[^<>]+>/g, '');
     }

     this.getParent = function (el, pTagName) {
         if (el == null) return null;
         else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) return el;
         else return this.getParent(el.parentNode, pTagName);
     }

     this.sort = function (cell) {

         var column = cell.cellIndex;
         var itm = this.getInnerText(this.tbody[0].rows[1].cells[column]);
         var sortfn = this.sortCaseInsensitive;

         if (itm.match(/\d\d[-]+\d\d[-]+\d\d\d\d/)) sortfn = this.sortDate; // date format mm-dd-yyyy
         if (itm.replace(/^\s+|\s+$/g, "").match(/^[\d\.]+$/)) sortfn = this.sortNumeric;

         this.sortColumnIndex = column;

         var newRows = new Array();
         for (j = 0; j < this.tbody[0].rows.length; j++) {
             newRows[j] = this.tbody[0].rows[j];
         }

         newRows.sort(sortfn);

         if (cell.getAttribute("sortdir") == 'down') {
             newRows.reverse();
             cell.setAttribute('sortdir', 'up');
         } else {
             cell.setAttribute('sortdir', 'down');
         }

         for (i = 0; i < newRows.length; i++) {
             this.tbody[0].appendChild(newRows[i]);
         }

     }

     this.sortCaseInsensitive = function (a, b) {
         aa = thisObject.getInnerText(a.cells[thisObject.sortColumnIndex]).toLowerCase();
         bb =...