JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://zurb.com/playground/playground/responsive-tables/responsive-tables.css">
<script src="http://tablesorter.com/__jquery.tablesorter.min.js"></script>
<script src="http://zurb.com/playground/playground/responsive-tables/responsive-tables.js"></script>
<table class="data responsive">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
<th>Hobby</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sarah Finch</td>
<td>37</td>
<td>5700</td>
<td>Cooking, Tennis</td>
</tr>
<tr>
<td>Andy Stravoski</td>
<td>28</td>
<td>4300</td>
<td>Gaming, Swimming</td>
</tr>
<tr>
<td>Tyler Will</td>
<td>45</td>
<td>7000</td>
<td>Running, Fitness</td>
</tr>
<tr>
<td>Maria Smith</td>
<td>18</td>
<td>3000</td>
<td>Programming, Shopping</td>
</tr>
<tr>
<td>Jack Jones</td>
<td>55</td>
<td>9500</td>
<td>Golf, Polo</td>
</tr>
</tbody>
</table>
CSS
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
table {
width: 100%;
background: skyblue;
}
JavaScript
$(document).ready(function()
{
$(".data").tablesorter();
}
);