JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
<table id="example1" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td></td>
</tr>
<tr>
<td>b</td>
<td></td>
</tr>
</tbody>
</table>
<table id="example2" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>link</th>
</tr>
</thead>
<tbody>
<tr>
<td>aa</td>
<td></td>
</tr>
<tr>
<td>bb</td>
<td></td>
</tr>
<tr>
<td>cc</td>
<td></td>
</tr>
</tbody>
</table>
JavaScript
$(document).ready(function () {
var a = $("#example1").DataTable({
"orderClasses": false,
"columnDefs": [{
"orderable": false,
"searchable": false,
"render": function (data, type, full, meta) {
return "<div class=\"moveDown\" style='background-color: green;'>move down</div>"
},
"targets": [1]
}]
});
var b = $("#example2").DataTable({
"orderClasses": false,
"columnDefs": [{
"orderable": false,
"searchable": false,
"render": function (data, type, full, meta) {
return "<div class=\"moveUp\" style='background-color: red;'>move up</div>"
},
"targets": [1]
}]
});
$('.display tbody').on('click', 'div.moveDown', function () {
var tr = $(this).closest('tr');
a.row(tr).remove().draw();
b.row.add(tr).draw();
});
$('.display tbody').on('click', 'div.moveUp', function () {
var tr = $(this).closest('tr');
b.row(tr).remove().draw();
a.row.add(tr).draw();
});
});