DataTables - Child rows

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css">
<script src="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script>
		<table id="MUTATIONSTATUS" class="table table-striped table-bordered table-hover center" align="center" style="width:100%">
                        <thead>
                        <tr>
			    <th></th>
                            <th style="text-align: center; vertical-align: middle">IGV Link</th>
                            <th style="text-align: center; vertical-align: middle">Gene<br/>hover:OMIM link</th>
			    <th style="text-align: center; vertical-align: middle">Variant Type</th>
                            <th style="text-align: center; vertical-align: middle">Exon#:Transcript:CD<br/>Indel hover:Mutalyzer</th>
                            <th style="text-align: center; vertical-align: middle">AA Change</th>
                            <th style="text-align: center; vertical-align: middle">Database References</th>
                            <th style="text-align: center; vertical-align: middle">Minor Allele Frequency(%)</th>
                            <th style="text-align: center; vertical-align: middle">Average QScore</th>
                            <th style="text-align: center; vertical-align: middle"><span class="frac">Minor/Major Allele Distribution (Fwd,Rev)</th>
			    <th style="text-align: center; vertical-align: middle; display:none">Gene</th>
                            <th style="text-align: center; vertical-align: middle; display:none">Chr:Pos</th>
                            <th style="text-align: center; vertical-align: middle; display:none">Base change</th>
			    <th style="text-align: center; vertical-align: middle; display:none">Database Ids</th>
                            <th style="text-align: center; vertical-align: middle; display:none">Minor Allele Frequency</th>
			 ...

CSS

td.details-control {
    background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_close.png') no-repeat center center;
}

JavaScript

/* Formatting function for row details - modify as you need */
function format ( d ) {
    console.log("@format"+d);
  
    // `d` is the original data object for the row
    return '<table class="table table-border table-hover">'+
           '<thead><tr><td>Filter</td><td>Exomes</td><td>Genomes</td><td>Total</td></tr></thead>'+
          
           d+
        '</tbody></table>';
}

$(document).ready(function() {
    var table = $('#MUTATIONSTATUS').DataTable({});

    // Add event listener for opening and closing details
   $('#MUTATIONSTATUS tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
        //console.log(row.data());
        if ( row.child.isShown() ) {
          // This row is already open - close it
          row.child.hide();
          tr.removeClass('shown');
        }
        else {
          // Open this row
          //console.log(tr.data('data-child-value')); // undef
          console.log(tr.data('child-value'));
          row.child(format(tr.data('child-value'))).show();
          tr.addClass('shown');
        }
    });
});