JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.0/css/responsive.dataTables.min.css">
<script src="https://cdn.datatables.net/responsive/2.2.0/js/dataTables.responsive.min.js"></script>
<div id="foo"></div>

CSS

td.control-mytext {
  background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
  cursor: pointer;
}

tr.opened td.control-mytext {
  background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;
}

div.slider {
  display: none;
}

table {
  width: 100% !important;
}

table.dataTable tbody td.no-padding {
  padding: 0;
}

JavaScript

function format ( d ) {
    return '<div class="slider">'+
        '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
            '<tr>'+
                '<td>Test</td>'+
                '<td>OK</td>'+
            '</tr>'+
        '</table>'+
    '</div>';
}

function CheckTable( bar ) {
  var foo = "bar_" + bar;
  var result = document.getElementById( "foo" );
  if ( $( "#" + foo ).length == 0 ) {
    var table = document.createElement( "table" );
    var thead = document.createElement( "thead" );
    var tr = document.createElement( "tr" );
    var td = document.createElement( "td" );
    var td2 = document.createElement( "td" ); td2.innerHTML = "H1" + bar;
    var td3 = document.createElement( "td" ); td3.innerHTML = "H2" + bar;
    var td4 = document.createElement( "td" ); td4.innerHTML = "H3" + bar;
    var td5 = document.createElement( "td" ); td5.innerHTML = "H4" + bar;
    var td6 = document.createElement( "td" ); td6.innerHTML = "H5" + bar;
    table.id = foo;
    tr.appendChild( td );
    tr.appendChild( td2 );
    tr.appendChild( td3 );
    tr.appendChild( td4 );
    tr.appendChild( td5 );
    tr.appendChild( td6 );
    thead.appendChild( tr );
    table.appendChild( thead );
    result.appendChild( table );
  }
  return foo;
}

for ( var i = 1; i <= 5; i++ ) {
	var bar = CheckTable( i );
  var tbl = $( "#" + bar ).DataTable({
  	data: [ 
    				[ "R1" + i, "R2" + i, "R3" + i, "R4" + i, "R5" + i ],
    				[ "R1" + i, "R2" + i, "R3" + i, "R4" + i, "R5" + i ],
            [ "R1" + i, "R2" + i, "R3" + i, "R4" + i, "R5" + i ]
          ],
    responsive: {
      'details': {
        'data': null,
        'type': 'column',
        'target': 9
      }
    },
    'columnDefs': [
    {
      'data': null,
      'defaultContent': '',
      'className': 'control-mytext',
      'orderable': false,
      'targets': 0
    }],
    'columns': [
    	{ 'data': null },
      { 'data': 0 },
      { 'data': 1 },
      { 'data': 2 },
     ...