JSFiddle - React, Tailwind, and code Playground
HTML
<script src="cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css">
<div class="container">
<table id="content" class="display" cellspacing="0" width="100%">
</table>
</div>
JavaScript
$(document).ready(function () {
$('#content').dataTable({
"aaData": ' [
{
"name": "Module 22x22x8",
"userInfo": {
"m_objIdRef": ""
},
"parents": {
"list": []
},
"dateTime": {
"tzMinutes": 0,
"usSinceEpoch": 0
},
"changeNr": 0,
"deleted": false,
"dagId": {
"m_dagRef": ""
},
"mountType": {
"value": 0
},
"releaseVersion": "",
"releaseComment": "",
"alternativeNames": {
"list": []
},
"id": "FA8F9078DB6415834AB79BDFACFD3DD7365A21D7"
}
],
"aoColumns" : [
{
"mData" : "name",
"title":"name",
"mRender" : function(data,
type, full) {
console.log("Name Column From AAData: " + data);
return updateEmptyColumn(data);
}
},
{
"mData" : "alternativeNames",
"title":"alternativeNames",
"mRender" : function(data,
type, full) {
return flatten(data, full.id, strPackage.trim(), "alternativeNames");
}
},
{
"mData" : "mountType",
"title":"mountType",
"mRender" : function(data,
type, full) {
return flatten(data, full.id, strPackage.trim(), "mountType");
}
},
{
"mData" : "id",
"mRender" : function(data,
type, full) {
return createButton(full.id, strPackage.trim());
}
}]
}
});
});