JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.tablesorter.ru/jquery.tablesorter.js"></script>
<table class="tablesorter" id="tableinvoices">
<thead>
<tr>
<th>Name</th>
<th>LastName</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td><b id="n1">Sonia</b></td>
<td><b id="l1">Soto</b></td>
<td><b id="a1">20</b></td>
</tr>
<tr>
<td><b id="n4">Carlos</b></td>
<td><b id="l2">Rodriguez</b></td>
<td><b id="a2">21</b></td>
</tr>
<tr>
<td><b id="n3">Borja</td>
<td><b id="l3">Valera</td>
<td><b id="a3">21</td>
</tr>
</tbody>
</table>
CSS
/* tables */
table.tablesorter {
font-family:arial;
background-color: #CDCDCD;
margin:10px 0pt 15px;
font-size: 8pt;
width: 100%;
text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #e6EEEE;
border: 1px solid #FFF;
font-size: 8pt;
padding: 4px;
}
table.tablesorter thead tr .header {
background-image: url(http://www.tablesorter.ru/themes/blue/bg.gif);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter tbody td {
color: #3D3D3D;
padding: 4px;
background-color: #FFF;
vertical-align: top;
}
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
background-image: url(http://www.tablesorter.ru/themes/blue/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
background-image: url(http://www.tablesorter.ru/themes/blue/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}
JavaScript
// http://tablesorter.com/docs/example-option-text-extraction.html
$(document).ready(function() {
// call the tablesorter plugin
$("table").tablesorter({
// define a custom text extraction function
textExtraction: function(node) {
// extract data from id and return it
console.log(node.childNodes[1].innerHTML); // Make sure the output IDs
return node.childNodes[1].innerHTML;
}
});
});