JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.1.2/css/rowReorder.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.1.2/js/dataTables.rowReorder.min.js"></script>
<body>
<div id="content">
<table id="table">
<thead>
<th>ID</th>
<th>Orig Pos</th>
<th>Name</th>
<th>Address</th>
<th>Move To Top Button</th>
</thead>
</table>
</div>
</body>
CSS
td:nth-child(odd) {
cursor: move;
background-color: #eee;
}
JavaScript
$(document).ready(function() {
var rows = [
[0, 0, "Bob Saget", "1234 Bob Saget Way", '<button class="move-to-top-btn">^</button>'],
[1, 1, "Johnny", "5678 Who Do We Appreciate Ln", '<button class="move-to-top-btn">^</button>'],
[2, 2, "Ronald", "111 Ronny Boy Ln", '<button class="move-to-top-btn">^</button>'],
[3, 3, "Cloud Strife", "123 Midgar Way", '<button class="move-to-top-btn">^</button>'],
[4, 4, "Arya Spark", "???", '<button class="move-to-top-btn">^</button>'],
];
var $table = $('#table');
var dt = $table.DataTable({
columnDefs: [
{ visible: false, targets: [0] },
{ width: 30, targets: [4] }
],
rowReorder: {
selector: 'td:nth-child(odd)',
snapX: 10
},
data: rows
});
dt.on('row-reorder', function(e, diff, edit) {
// Do I need to do something here?
});
// This works as long as we haven't manually moved rows around with the mouse cursor yet.
$table.find('tbody').on('click', '.move-to-top-btn', function() {
var $row = $(this).closest('tr'),
index = $row.index();
if (index === 0) {
return;
}
var rowToMoveUp = dt.row(index).data();
for (var i = index; i > 0; --i) {
var rowData = dt.row(i - 1).data();
rowData[0]++;
dt.row(i).data(rowData);
}
rowToMoveUp[0] = 0;
dt.row(0).data(rowToMoveUp);
dt.draw(true);
});
});