JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<table id="example" class="display" style="width:100%"></table>
<button id="create">Create row</button>
<button id="refresh">Refresh table</button>
JavaScript
const Obj = {
"0":"Tiger Nixon, Garrett Winters, Ashton Cox, Cedric Kelly, Airi Satou",
"1":"System Architect, Accountant, Junior Technical Author, Senior Javascript Developer, Accountant",
"2":"Edinburgh, Tokyo, San Francisco, Edinburgh, Tokyo",
"3":"5421, 8422, 1562, 6224, 6224, 5407",
"4":"2011/04/25, 2011/07/25, 2009/01/12, 2012/03/29, 2008/11/28",
"5":"$320,800, $170,750, $86,000, $433,060, $162,700"
};
const dataSet = [];
var count = Obj[0].split(", ").length;
var countOuter = Object.keys(Obj).length;
for( var i = 0; i < count; i++){
var string = [];
for( var j = 0; j < countOuter; j++){
string.push(Obj[j].split(", ")[i]);
}
dataSet[i] = string;
}
$(document).ready(function() {
$('#example').DataTable( {
data: dataSet,
"scrollX": true,
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" }
]
});
});
console.log(dataSet);
document.getElementById("create").onclick = function() { createTab() };
document.getElementById("refresh").onclick = function() { refreshTab() };
function createTab() {
dataSet.push( ["Clementine", "Garrett Winters", "Ashton Cox", "Cedric Kelly", "Airi Satou"] );
console.log(dataSet);
}
function refreshTab() {
var table = $('#example').DataTable();
table.rows().invalidate().draw();
console.log("resfresh completed");
}