JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<div id="demo">
    
</div>

JavaScript

//Class definition function
function Browser(browserData) {
    //Browser initialization constructor
    if (browserData) {
        this.setData(browserData);
    }
}

//Class Methods
Browser.prototype = {
    setData: function (browserData) {
        $.extend(true,this,browserData);
        return this;
    }
}

var browser1 = new Browser({
    "DT_RowId":1,
    "Engine":"Trident",
    "Browser":"Internet Explorer 4.0",
    "Platform":"Win 95+",
    "Version":"4",
    "Grade":"X"
});

var browser2 = new Browser({
    "DT_RowId":2,
    "Engine":"Trident",
    "Browser":"Internet Explorer 5.0",
    "Platform":"Win 95+",
    "Version":"5",
    "Grade":"C"
});

var browser3 = new Browser({
    "DT_RowId":3,
    "Engine":"Trident",
    "Browser":"Internet Explorer 5.5",
    "Platform":"Win 95+",
    "Version":"5.5",
    "Grade":"A"
});

var browser4 = new Browser({
    "DT_RowId":4,
    "Engine":"Trident",
    "Browser":"Internet Explorer 6",
    "Platform":"Win 98+",
    "Version":"6",
    "Grade":"A"
});

var browserArray = [browser1,browser2,browser3,browser4];

$(document).ready(function() {
	$('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );

	console.log(browserArray);
	var dataTable = $('#example').dataTable( {
		"columns": [
			{ "title": "Engine" },
			{ "title": "Browser" },
			{ "title": "Platform" },
			{ "title": "Version", "class": "center" },
			{ "title": "Grade", "class": "center" }
		]
	});
	dataTable.fnAddData(browserArray);
} );