JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/joequery/Stupid-Table-Plugin/stupidsort/stupidtable.min.js"></script>
 <table>
    <thead>
      <tr>
        <th data-sort="int" id="relevant">int</th>
        <th data-sort="float">float</th>
        <th data-sort="string">string</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>15</td>
        <td>-.18</td>
        <td>banana</td>
      </tr>
      <tr class="awesome">
        <td>95</td>
        <td>36</td>
        <td>coke</td>
      </tr>
      <tr>
        <td>2</td>
        <td>-152.5</td>
        <td>apple</td>
      </tr>
    </tbody>
  </table>

<button id="rnd_btn">Insert random data</button><br/>
<button id="sort_int">Sort the int column ascending</button>

CSS

table {
      border-collapse: collapse;
    }
    th, td {
      padding: 5px 10px;
      border: 1px solid #999;
    }
    th {
      background-color: #eee;
    }
    th[data-sort]{
      cursor:pointer;
    }
    tr.awesome{
      color: red;
    }

JavaScript

$(function(){
        var $table = $("table").stupidtable();
       
       var $random_btn = $("#rnd_btn");
       $random_btn.click(function(){
           for(var i=0; i<5; i++){
               var rnd_str = Math.random().toString(36).substring(2,7);
               var rnd_float = parseInt(Math.random() * 1000,10)/10;
               var rnd_int = parseInt(Math.random() * 1000);
               
               var row_html = "<tr>";
               row_html += "<td>"+rnd_int+"</td>";
               row_html += "<td>"+rnd_float+"</td>";
               row_html += "<td>"+rnd_str+"</td>";
               row_html += "</tr>";
               
               $("table").find("tr:last").after(row_html);
           }
           $(this).hide();           
       });
       
       var $sort_btn = $("#sort_int");
       $sort_btn.click(function(){
           $("#relevant").stupidsort('asc') 
       });
    });