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 >group</th>
            <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>group1</td>
            <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>group1</td>
            <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>

CSS

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

.childtable_hidden{
  display:none;
}
.childtable thead{
    display:none;
    //border-collapse: collapse;
    //padding: 0; 
    //cellspacing: 0;
}
.childtable.dataTable tbody th, .childtable.dataTable tbody td {
    //padding: 0;
    //cellspacing: 0;
}



 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

$('td > a').on('click', function(e) {
   e.preventDefault();
   e.stopPropagation();
   
   $(this).html('[-]');
   var tr = $(this).closest('tr');
   var nextTr = tr.next();
   nextTr.toggle();
   //var nextTable = nextTr.find('table:first');
   //nextTable.toggle(); 
});

$(document).ready(function () {
		var widthTableArray=[];
/*  on doit aussi ajouter le margin dans la taille */
        function findWidths(table) {
            widthTableArray = [];

            $('th', table).each(function() {

console.log("outer=" + $(this).outerWidth() + "  width=" + $(this).width() + "   inner=" + $(this).innerWidth());
                mWid = $(this).outerWidth();
                /* mWid = $(this).width(); */
                /* mWid = $(this).innerWidth(); */

                widthTableArray.push(mWid);
            });

            console.log('findWidths=' + widthTableArray);
        }

        function ajustWidths(table) {
						console.clear();
            console.log("table=" + table.html());
            var firstRow = table.api().row(0);
            console.log("firstRow Data = " + firstRow.data());

            console.log("closest=" + $(firstRow).closest('tr').html());

            console.log("trtr closest=" + $(this).closest('tr').html());
            
            console.log("table find tr=" + $(table).find('tbody >tr').html());

            var trtr = $(table).find('tbody >tr');

            console.log("trtr after find=" + trtr.html());
            var j = 0;
            $('td', trtr).each(function () {
            		console.log("j=" + j + "  this=" + this);
                $(this).css("min-width", eval(widthTableArray[j]-20) + "px");
                j++;
            });
        }


    var table = $('#example').DataTable({'columnDefs': [{
         'targets': 0,
         'className': 'dt-body-center'}],
         "initComplete": function(settings, json) {
                findWidths(table);
                //ajustWidths(this);
                }
				});
        ...