JSFiddle - React, Tailwind, and code Playground
by qunzorez
HTML
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/searchpanes/1.2.0/css/searchPanes.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/searchpanes/1.2.0/js/dataTables.searchPanes.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/scroller/2.0.3/js/dataTables.scroller.min.js"></script>
<table class="custom-style" id="test1">
<thead class="table-head">
<tr>
<th class="checkbox-mark">
<input type="checkbox" class="custom-checkbox" id="checkAll"/>
</th>
<th>Station code</th>
<th>Station name</th>
<th>Station type</th>
<th>Description</th>
<th>Belongs to production resource(s)</th>
<th>Main production resource</th>
<th></th>
</tr>
</thead>
<tbody class="table-body">
<tr>
<td>
<input type="checkbox" class="custom-checkbox checkbox-mark"/>
</td>
<td id="code_1" class="col-2">
<span class="float-left">
<em class="fa fa-eye pointer fa-visible" data-title="Visible"></em>
<em class="fa fa-check pointer fa-active" data-title="Active"></em>
</span>
SEWING02-101
</td>
<td id="name_1">
1012
</td>
<td id="name_1">
...