JSFiddle - React, Tailwind, and code Playground

by JoeQuery

HTML

<script src="https://raw.github.com/joequery/Stupid-Table-Plugin/master/stupidtable.min.js"></script>
<table id="substancesTable" class="table table-hover">
                        <thead>
                            <tr><th id="STcheckboxes"><input type="checkbox" id="checkAllSalts"></th>
                            <th data-sort="string" class="saltInfo stupidSort type-string sorted asc"><i class="icon-resize-vertical pull-right"></i>Substances &amp; Properties</th>
                            <th data-sort="string" class="saltManufacture stupidSort type-string"><i class="icon-resize-vertical pull-right"></i>Manufacture</th>
                            <th data-sort="string" class="saltChemName stupidSort type-string"><i class="icon-resize-vertical pull-right"></i>Chemical Formula</th>
                            <th data-sort="string" class="concentrateSides stupidSort type-string"><i class="icon-resize-vertical pull-right"></i>Concentrate Type</th>
                    
                        </tr></thead>
                        <tbody>
                                                <tr><td class="cboxholder"><i class="icon-check"></i><input type="checkbox" name="availableSalts[]" id="aSalts-8" value="8"></td>
                            <td>STEM Micronutrient Mix</td>
                            <td>Scotts Peters</td>
                            <td>S-B-Cu-Fe-Mn-Mo-Zn</td>
                            <td></td></tr><tr><td class="cboxholder"><i class="icon-check"></i><input type="checkbox" name="availableSalts[]" id="aSalts-4" value="4"></td>
                            <td>Potassium Sulfate</td>
                            <td>Diamond K</td>
                            <td>K<sub>2</sub>SO<sub>4</sub></td>
                            <td></td></tr><tr><td class="cboxholder"><i class="icon-check"></i><input type="checkbox" name="availableSalts[]" id="aSalts-13" value="13"></td>
                            <td>Potassium Nitrate</td>
                          ...

CSS

.table {
width: 100%;
margin-bottom: 20px;
}
table {
max-width: 100%;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
}
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  background-color: #f5f5f5;
}
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}
#substancesTable tr {
cursor: pointer;
}
th.type-string {
cursor: pointer;
}
.table th {
font-weight: bold;
}
#substancesTable .table-hover tbody tr:hover td, #substancesTable .table-hover tbody tr:hover th {
    background-color:#EEE;
}
th.type-string {
    cursor:pointer;
}
th#STcheckboxes {
    width:4%;
}
th.saltManufacture {
    width:20%;
}
th.saltChemName {
    width:18%;
}
th.concentrateSides {
    width:16%;
}

JavaScript

jQuery("#substancesTable").stupidtable();