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>
      <th>Index</th>
    </tr>
  </thead>
</table>

JavaScript

var objectA = {
				              "Name": "Jiawei",
				              "Position": "Developer",
				              "Office": "Singapore",
				              "Index": 1
				            };
				            var objectB = {
				              "Name": "John",
				              "Position": "Designer",
				              "Office": "Malaysia",
				              "Index": 2
				            };
				            var objectC = {
				              "Name": "Jenny",
				              "Position": "Project Manager",
				              "Office": "China",
				              "Index": 3
				            };
				            var objectD = {
				              "Name": "June",
				              "Position": "Creative",
				              "Office": "Taiwan",
				              "Index": 4
				            };
				            var objectE = {
				              "Name": "Jean",
				              "Position": "Developer",
				              "Office": "Singapore",
				              "Index": 5
				            };
				            var dataSet = [];
				            dataSet.push(objectA);
				            dataSet.push(objectB);
				            dataSet.push(objectC);
				            dataSet.push(objectD);
				            dataSet.push(objectE);

				            var table = $('#Table').DataTable({
				              data: dataSet,
				              lengthMenu: [5, 10, 15, 20, 25],
				              columns: [{
				                'data': "Name",
				              }, {
				                'data': "Position",
				              }, {
				                'data': "Office",
				              }, {
				                'data': "Index"
				              }],
				              "oLanguage": {
				                "sEmptyTable": "Error: Empty Table. Please create a new question"
				              },
				              bProcessing: true,
				              bStateSave: false,
				              bPaginate: true,
				              rowReorder: {
				                dataSrc: 'Index'
				              },
                       "order": [[ 3, "asc"...