JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/ui-lightness/jquery-ui.css">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
<div style='margin-left:20px; margin-right:20px;'>
<table id='id_tblProd' class='display cell-border'>
</table>
</div>
<br/>
<button id='id_btnReload' >Reload table</button>
JavaScript
var testData = [];
var testCols = [];
function loadData() {
var tdata = {};
tdata['col1'] = 'test 1';
tdata['col2'] = 'test 2';
tdata['col3'] = 'test 3';
tdata['col4'] = 'test 4';
testData.push(tdata);
var tdata = {};
tdata['col1'] = 'test 5';
tdata['col2'] = 'test 6';
tdata['col3'] = 'test 7';
tdata['col4'] = 'test 8';
testData.push(tdata);
var col = {};
col['title'] = '1';
col['data'] = 'col1';
col['searchable'] = false;
col['orderable'] = false;
col['defaultContent'] = 0;
col['width'] = '40px';
testCols.push(col);
var col = {};
col['title'] = '2';
col['data'] = 'col2';
col['searchable'] = false;
col['orderable'] = false;
col['defaultContent'] = 0;
col['width'] = '40px';
testCols.push(col);
var col = {};
col['title'] = '3';
col['data'] = 'col3';
col['searchable'] = false;
col['orderable'] = false;
col['defaultContent'] = 0;
col['width'] = '40px';
testCols.push(col);
var col = {};
col['title'] = '4';
col['data'] = 'col4';
col['searchable'] = false;
col['orderable'] = false;
col['defaultContent'] = 0;
col['width'] = '40px';
testCols.push(col);
}
function reloadTable() {
$('#id_tblProd').find('thead tr th').remove();
testData = [];
var tdata = {};
tdata['col1'] = 'test 1';
tdata['col2'] = 'test 2';
tdata['col3'] = 'test 3';
tdata['col4'] = 'test 4';
tdata['col5'] = 'test 5';
tdata['col6'] = 'test 6';
tdata['col7'] = 'test 7';
tdata['col8'] = 'test 8';
testData.push(tdata);
var tdata = {};
tdata['col1'] = 'test 10';
tdata['col2'] = 'test 20';
tdata['col3'] = 'test 30';
tdata['col4'] = 'test 40';
tdata['col5'] = 'test 50';
tdata['col6'] = 'test 60';
tdata['col7'] = 'test 70';
tdata['col8'] = 'test 80';
testData.push(tdata);
testCol = [];
var col = {};
col['title'] = '5';
col['data'] =...