JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgithub.com/Mottie/tablesorter/master/js/jquery.tablesorter.js"></script>
<script src="https://rawgithub.com/Mottie/tablesorter/master/js/jquery.tablesorter.widgets.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/Mottie/tablesorter/master/css/theme.default.css">
<h1>Try to some scroll table for activate sticky header,
and then use "Last Name" filter-select</h1>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th class="filter-select filter-exact">Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>[email protected]</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>[email protected]</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>[email protected]</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>[email protected]</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
<tr>
<td>Smith</td>
<td>John</td>
<td>[email protected]</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>[email protected]</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>[email protected]</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>[email protected]</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
<tr>
<td>Smith</td>
<td>John</td>
<td>[email protected]</td>
<td>$50.00</td>
...
JavaScript
$(function(){
$("#myTable").tablesorter({
widgets: ['filter', 'stickyHeaders']
});
});