JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<table id="kiran">
<thead>
<tr>
<th class="hidden-480">Name</th>
<th class="hidden-480">Price</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
JavaScript
$(function()
{
displayData();
var table = $('#kiran').dataTable(
{
"order": [
[1, "desc"]
],
"paging": false,
"bDestroy":true,
"sDom":'t<"bottom"filp><"clear">'
});
var refreshIntervalId = setInterval(displayData, 2000);
})
function displayData()
{
var json = [
{
"Name": "ONE",
"Price": "12"
},
{
"Name": "TWO",
"Price": "100"
},
{
"Name": "THREE",
"Price": "42"
}]
$("#kiran > tbody").html("");
for (var i = 0; i < json.length; i++)
{
var name = json[i].Name;
var price = json[i].Price;
$('<tr>').append($("<td width='20%''>").text(name), $("<td width='25%'>").text(price)).appendTo('#kiran');
}
}