JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.1.0/js/dataTables.rowReorder.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.0.0/css/rowReorder.bootstrap.min.css">
<table id="Table" class="table table-striped table-bordered dt-responsive nowrap" style="width: 100%;">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
</table>
JavaScript
var objectA = {
"Name": "Jiawei",
"Position": "Developer",
"Office": "Singapore"
};
var objectB = {
"Name": "John",
"Position": "Designer",
"Office": "Malaysia"
};
var objectC = {
"Name": "Jenny",
"Position": "Project Manager",
"Office": "China"
};
var objectD = {
"Name": "June",
"Position": "Creative",
"Office": "Taiwan"
};
var objectE = {
"Name": "Jean",
"Position": "Developer",
"Office": "Singapore"
};
var dataSet = [];
dataSet.push(objectA);
dataSet.push(objectB);
dataSet.push(objectC);
dataSet.push(objectD);
dataSet.push(objectE);
console.log(dataSet);
var table = $('#Table').DataTable({
data: dataSet,
lengthMenu: [5, 10, 15, 20, 25],
columns: [{
'data': "Name",
}, {
'data': "Position",
}, {
'data': "Office",
}],
"oLanguage": {
"sEmptyTable": "Error: Empty Table. Please create a new question"
},
bProcessing: true,
bStateSave: false,
bPaginate: true,
rowReorder:true
})
$('#Table').on('row-reorder.dt', function (dragEvent, data, nodes) {
alert('row #' +
data[0].node._DT_RowIndex +
' moved from pos ' +
...