JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/responsive/1.0.1/js/dataTables.responsive.min.js"></script>
<table id="example" class="display nowrap" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th ></th>
            <th>Item 1</th>
            <th >Item 2</th>
            <th>Item 3</th>
            <th >Item 4</th>
        </tr>
    </thead>
    <tbody>
        <tr data-child-value="hidden 1">
            <td class="details-control">_</td>
            <td>data 1a</td>
            <td>data 1b</td>
            <td>data 1c</td>
            <td>data 1d</td>
        </tr>
        <tr data-child-value="hidden 2">
            <td class="details-control">_</td>
            <td>data 2a</td>
            <td>data 2b</td>
            <td>data 2c</td>
            <td>data 2d</td>
        </tr>
    </tbody>
</table>

    <table id="example2" class="childtable childtable_hidden" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th></th>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
                <th>Col 4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Jen</td>
                <td>100</td>
                <td>Left</td>
                <td>Left</td>
            </tr>
            <tr>
                <td>Sal</td>
                <td>88</td>
                <td>Right</td>
                <td>Right</td>
            </tr>
        </tbody>
    </table>

CSS

@import url('//cdn.datatables.net/1.10.2/css/jquery.dataTables.css');

.childtable_hidden{
  display:none;
}
.childtable thead{
    display:none;
    
}
.childtable.dataTable tbody th, .childtable.dataTable tbody td {
    
}



 td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}

table.dataTable tbody td.nestedtable {
  width:100%;
  background: green;
  padding: 0;
  cellspacing: 0;
}
table.dataTable tbody td.nestedtable tr.odd td {
  background: red;
  //padding: 0;
  //cellspacing: 0;
}
table.dataTable tbody td.nestedtable tr.even td {
  background: blue;
  //padding: 0;
  //cellspacing: 0;
}
table.dataTable tbody td.nestedtable tr.even td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}

table.dataTable tbody td.nestedtable tr.odd td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}


.nestedtable table {
  width:100%;
  background: blue;
  padding: 0;
  cellspacing: 0;
  
}
table.dataTable tbody td.nestedtable td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
table.dataTable tbody td.nestedtable tr.shown td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}

JavaScript

$(document).ready(function () {
    var table = $('#example').DataTable({'columnDefs': [{
         'targets': 0,
         'className': 'dt-body-center'}]});
         
    // Add event listener for opening and closing details
    $('#example').on('click', 'td.details-control', function (e) {
    //e.stopPropagation();
    console.log("click parent");
        var tr = $(this).closest('tr');
        var row = table.row(tr);
        
        //console.log($(this).parents('tr').html());
        
        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        } else {
            // Open this row
             callAjax2(row);
             tr.addClass('shown');
        }
    });
    
    function callAjax2(row) {
    
    var table2 = $('#example2').clone().attr('id', "tableSecondLevel").dataTable( {
            "sDom": 'ti',
            "deferRender": true,
            "processing": true,
            "ajax": '/echo/js/?js={"data" : [ ["__", "aaa", "2", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1"] , ["__", "bbb", "2", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1"] ] }',
            "columnDefs": [{
                'targets': 0,
                'className': 'details-control'}],
            "createdRow": function ( row, data, index ) {
              var j=0;
              $('td', row).each(function() {
                $(this).css("width", arrOfTable1[j]+"px");
                 j++; 
              });
          }
        });
        
        table2.removeClass("childtable_hidden");
        
        var child = row.child(table2);
       var table_td =$(table2).closest('tr td');
       
       //table_td.attr('id', "coucou");
       table_td.addClass("nestedtable");
       table2.addClass("secondlevel");
       //console.log(table_td);
       child.show();

			table2.on({
              click:...