Try this...
[{"id":"2f3649eb.570fe6","type":"ui_template","z":"f052a358.d8f0d","group":"e8366647.01ffa8","name":"","order":0,"width":0,"height":0,"format":"<script>\n\n/* Formatting function for row details - modify as you need */\nfunction format ( d ) {\n // `d` is the original data object for the row\n return '<table cellpadding=\"5\" cellspacing=\"0\" border=\"0\" style=\"padding-left:50px;\">'+\n '<tr>'+\n '<td>Full name:</td>'+\n '<td>'+d.deviceId+'</td>'+\n '</tr>'+\n '<tr>'+\n '<td>Extension number:</td>'+\n '<td>'+d.cameraId+'</td>'+\n '</tr>'+\n '<tr>'+\n '<td>Extra info:</td>'+\n '<td>And any further details here (images etc)...</td>'+\n '</tr>'+\n '</table>';\n}\n\n$(document).ready(function() {\n var table = $('#example').DataTable( {\n \"ajax\": 'https://api.myjson.com/bins/16lp6',\n scrollY: 250,\n \tdeferRender: true,\n \tscroller: true,\n \"columns\": [\n {\n \"class\": 'details-control',\n \"orderable\": false,\n \"data\": null,\n \"defaultContent\": ''\n },\n { \"data\": \"name\" },\n { \"data\": \"position\" },\n { \"data\": \"office\" },\n { \"data\": \"salary\" },\n { \"data\": \"extn\", \"visible\": false }\n \n ],\n \"order\": [[1, 'asc']]\n } );\n\n // Add event listener for opening and closing details\n $('#example tbody').on('click', 'td.details-control', function(){\n var tr = $(this).closest('tr');\n var row = table.row( tr );\n\n if(row.child.isShown()){\n // This row is already open - close it\n row.child.hide();\n tr.removeClass('shown');\n } else {\n // Open this row\n row.child(format(row.data())).show();\n tr.addClass('shown');\n }\n });\n\n // Handle click on \"Expand All\" button\n $('#btn-show-all-children').on('click', function(){\n // Enumerate all rows\n table.rows().every(function(){\n // If row has details collapsed\n if(!this.child.isShown()){\n // Open this row\n this.child(format(this.data())).show();\n $(this.node()).addClass('shown');\n }\n });\n });\n\n // Handle click on \"Collapse All\" button\n $('#btn-hide-all-children').on('click', function(){\n // Enumerate all rows\n table.rows().every(function(){\n // If row has details expanded\n if(this.child.isShown()){\n // Collapse row details\n this.child.hide();\n $(this.node()).removeClass('shown');\n }\n });\n });\n});\n\n</script>\n\n<div >\n \n <button id=\"btn-show-all-children\" type=\"button\">Expand All</button>\n <button id=\"btn-hide-all-children\" type=\"button\">Collapse All</button>\n <hr>\n <table id=\"example\" class=\"display\" cellspacing=\"0\" width=\"100%\">\n <thead>\n <tr>\n \t\t\t\t <th></th>\n <th>Name</th>\n <th>Position</th>\n <th>Office</th>\n <th>Salary</th>\n </tr>\n </thead>\n <tfoot>\n <tr>\n \t\t\t\t <th></th>\n <th>Name</th>\n <th>Position</th>\n <th>Office</th>\n <th>Salary</th>\n </tr>\n </tfoot>\n </table>\n\n \n</div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":440,"y":160,"wires":[[]]},{"id":"e8366647.01ffa8","type":"ui_group","z":"","name":"Table","tab":"b604a288.9c60a","disp":true,"width":"12","collapse":false},{"id":"b604a288.9c60a","type":"ui_tab","z":"","name":"Data Table","icon":"dashboard","disabled":false,"hidden":false}]
