JSFiddle - React, Tailwind, and code Playground
HTML
<link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
<body>
<table class="telemetryTable rootTable threeColumns"></table>
</body>
JavaScript
var dataset = {
"FriendlyName":"Name1",
"Duration":"0:0:00001",
"IsRunning":"true",
"Children": [{
"FriendlyName":"Name11",
"Duration":"0:0:00001",
"IsRunning":"true",
"Children": [{
"FriendlyName":"Name111",
"Duration":"0:0:00001",
"IsRunning":"true"
},
{
"FriendlyName":"Name112",
"Duration":"0:0:00001",
"IsRunning":"true"
} ]
},
{
"FriendlyName":"Name12",
"Duration":"0:0:00001",
"IsRunning":"true",
"Children": [{
"FriendlyName":"Name121",
"Duration":"0:0:00001",
"IsRunning":"true",
"Children": [{
"FriendlyName":"Name1211",
"Duration":"0:0:00001",
"IsRunning":"true"
},
{
"FriendlyName":"Name1212",
"Duration":"0:0:00001",
"IsRunning":"true"
} ]
}]
} ]
}
$('.telemetryTable').dataTable({
"aaData": dataset.Children,
"bPaginate": false,
"bFilter": false,
"bInfo": false,
"aoColumns": [
{
"mData": "FriendlyName",
sTitle: "FriendlyName",
"render":
function (data, type, full, meta) {
if (typeof full.Children != "undefined" && full.Children.length > 0) {
return '<button class="telemetryExpandCollapse"></button><span>' + data + '(' + full.Children.length + ')</span>';;
} else {
return data;
}
}
},
{
"mData": "Duration", sTitle: "Duration"
},
{
"mData": "IsRunning", sTitle: "IsRunning"
}],
"drawCallback": function (oSettings) {
var order = oSettings.oInstance.DataTable().order();
...