JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table table-hover table-bordered">
<thead class="colorBlue">
<tr>
<td>S.No</td>
<td>Applied On</td>
<td>Leave Type</td>
<td>Leave On</td>
<td>Duration</td>
<td>Status</td>
<td>Approved On</td>
<td>Approved By</td>
<td>Action</td>
</tr>
</thead>
<tbody id="levListTable"></tbody>
</table>
JavaScript
var leaveList = [{
"appliedOn": "12-02-2017",
"levType": "causual",
"leaveOn": "1238626800000",
"duration": "5 days",
"status": "approved",
"approvedOn": "13-02-2017",
"approvedBy": "HR"
}, {
"appliedOn": "12-02-2017",
"levType": "privileged",
"leaveOn": "1238626800000",
"duration": "8 days",
"status": "pending",
"approvedOn": "13-02-2017",
"approvedBy": "HR"
}];
$(document).ready(function() {
leaveTable()
});
function leaveTable() {
for (var i = 0; i < leaveList.length; i++) {
var tab = '<tr id="' + i + '"><td>' + (i + 1) + '</td><td class="appliedOn">' + leaveList[i].appliedOn + '</td><td class="levType" >' + leaveList[i].levType + '</td><td class="leaveOn" >' + formatDate(leaveList[i].leaveOn) + '</td><td class="duration">' + leaveList[i].duration + '</td><td class="status">' + leaveList[i].status + '</td><td class="approvedOn">' + leaveList[i].approvedOn + '</td><td class="approvedBy">' + leaveList[i].approvedBy + '</td><td><i class="btn editLev fa fa-calendar-plus-o" id="editLev' + i + '" onclick="editLevDetails(this)" ></i><i class="btn dltLev fa fa-times" onclick="deleteRow(this)" data-dismiss="modal" id="dlt' + i + '"></i></td><tr>';
$('#levListTable').append(tab)
}
}
function formatDate(inputStr) {
var timestamp = parseInt(inputStr, 10);
var date = new Date(timestamp);
var a =date.toISOString().substr(0, 10);
var datePart = a.match(/\d+/g),
year = datePart[0].substring(2),
month = datePart[1], day = datePart[2];
return day+'-'+month+'-'+year+'-'+a;
}