JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/rowreorder/1.1.1/js/dataTables.rowReorder.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.1.1/css/rowReorder.dataTables.min.css">
<table class="table table-striped table-bordered table-hover" id="playlist_table">
<thead>
<tr>
<th>name</th>
<th>sasd</th>
<th>dfgdfg</th>
</tr>
</thead>
<tbody>
<tr>
<td>3wred</td>
<td>4sdf3</td>
<td>kiyuj</td>
</tr>
<tr>
<td>rthgdfv</td>
<td>wefsdv</td>
<td>34trf</td>
</tr>
<tr>
<td>hytrgfbd</td>
<td>4t5erv</td>
<td>33333</td>
</tr>
</tbody>
</table>
JavaScript
var TableDatatablesRowreorder = function() {
var e = function() {
var e = $("#playlist_table");
e.dataTable({
rowReorder: true,
order: false,
buttons: [],
columns: [
{ orderable: false },
{ orderable: false },
{ orderable: false },
],
lengthMenu: [
[5, 10, 15, 20, -1],
[5, 10, 15, 20, "הכל"]
],
pageLength: 10,
dom: "<'row' <'col-md-12'B>><'row'<'col-md-12 col-sm-12'l><'col-md-12 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-12 col-sm-12'i><'col-md-12 col-sm-12'p>>"
})
};
return {
init: function() {
jQuery().dataTable && (e())
}
}
}();
jQuery(document).ready(function() {
TableDatatablesRowreorder.init();
});