JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<!-- Buttons -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.bootstrap4.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.bootstrap4.min.js"></script>
<!-- colReorder -->
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/colreorder/1.4.1/css/colReorder.bootstrap4.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/colreorder/1.4.1/js/dataTables.colReorder.min.js"></script>
<table id="results_datatable" class="display">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Rank</th>
<th>Job</th>
<th>Date</th>
<th>Test</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Doe</td>
<td>John</td>
<td>Private</td>
<td>Mechanic</td>
<td>01/01/2020</td>
<td>Exam 1</td>
<td>Passed</td>
</tr>
<tr>
<td>Doe</td>
<td>Jane</td>
<td>Private</td>
<td>Usher</td>
<td>01/01/2020</td>
<td>Exam 3</td>
<td>Passed</td>
</tr>
<tr>
<td>Smith</td>
<td>Jane</td>
<td>Private</td>
<td>Usher</td>
<td>01/01/2020</td>
<td>Exam 3</td>
<td>Passed</td>
</tr>
<tr>
<td>Smith</td>
<td>Will</td>
<td>Private</td>
<td>Actor</td>
<td>01/01/2020</td>
<td>Exam 3</td>
<td>Passed</td>
</tr>
<tr>
<td>Smith</td>
<td>Mark</td>
...
JavaScript
$('#results_datatable').DataTable({
"dom": 'lftipr',
//"colReorder": true,
//"stateSave": true,
//"bDestroy": true ,
//"bJQueryUI": true,
"scrollY": "400px",
"aaSorting": [
[0, 'asc'],
[1, 'asc']
]
})