JSFiddle - React, Tailwind, and code Playground

by survivant

HTML

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.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="hiddenTable" 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>
    </table>  
    <input class="global_filter" id="global_filter" type="text">
     column<input class="column_filter" id="column_filter" type="text">
     <br />
     <button id="filterButton" class="btn btn-primary">Filter</button>

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 tr.nestedtable td.test {
    background: green none repeat scroll 0 0;
    width: 100%;
    padding: 0;
    cellspacing: 0;
}

JavaScript

$(document).ready(function () {
		
    var arrOfTable1=[];
    var threshold=[];
    var i=0;

    var table = $('#example').DataTable({
    searching: true,
    "sDom": 'tip',
    	'columnDefs': [{
         'targets': 0,
         'className': 'dt-body-center'}]});
         
    $('td.details-control').on('click', function (e) {
		    console.log("click parent");
        //$(this).html('[-]');
        var tr = $(this).closest('tr');
        
        var nextTr = tr.next();
        
        console.log("is nested = " + nextTr.hasClass("nestedtable"));
        
        if(!nextTr.hasClass("nestedtable")){
          tr.addClass("shown");
          findWidths($('#example'));
          callAjax2(tr);
        } else {
        	if(nextTr.is(":visible")){
            tr.removeClass("shown");
          } else {
            tr.addClass("shown");
          }
        	//var nextTable = nextTr.find('table:first');
          var nextTr = tr.next();
   				nextTr.toggle();
          //nextTable.toggle(); 
        }
  		 	
    });
    
    function callAjax2(row) {
    threshold = [];
    var table2 = $('#hiddenTable').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++; 
              });
              
              $.each(data, function( index, value ) {
                //console.log(index);
                if(value=='aaa'){
             ...