JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" type="text/css">
<link rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.1.0/css/rowGroup.dataTables.min.css" type="text/css">
<style>
tr.odd td:first-child,
tr.even td:first-child {
padding-left: 4em;
}
th.dt-center, td.dt-center { text-align: center; }
</style>
</head>
<body>
<div class="row">
<div class="checkbox col-sm-5">
<label><input type="checkbox" value="" id="SelectAll">Select All</label>
</div>
</div>
</div>
</div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Date</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Clocked in</th>
<th>Clocked Out</th>
<th>N. Attendance</th>
<th>Day off</th>
<th>Sick</th>
<th>Holiday</th>
<th>Time Off</th>
<th>Time Off Hrs</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td> 20/03/2019</td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td> 00:00</td>
<td> 00:00</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>sdkjfhsdh s dofhsdfh sdiufuisfi iufhi s uifi s iuf sdif</td>
</tr>
...
JavaScript
$(document).ready(function() {
$('#example').DataTable({
scrollY: "500px",
scrollX: true,
paging: false
});
});