JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,cr-1.2.0,fc-3.1.0,fh-3.0.0,r-1.0.7,rr-1.0.0,sc-1.3.0/datatables.min.css">
<script src="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,cr-1.2.0,fc-3.1.0,fh-3.0.0,r-1.0.7,rr-1.0.0,sc-1.3.0/datatables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.9/api/order.neutral().js"></script>
<button id="res" type="button">reset order</button>
<table id="myTable" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>Seq.</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Seq.</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>2</td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>22</td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>6</td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>41</td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
...
JavaScript
var table;
$(document).ready(function(){
table = $('#myTable').DataTable({
rowReorder: {
selector: 'tr'
},
"bPaginate": false,
"scrollX": true
});
$( "#res" ).click(function() {
res();
});
});
function res() {
table.order.neutral().draw();
}