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.shown td.control-mytext {
  background: url('https://datatables.net/examples/resources/details_open.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>Full name:</td>'+
                '<td>OK</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Extension number:</td>'+
                '<td>OK</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Extra info:</td>'+
                '<td>And any further details here (images etc)...</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: [ [ i + "1", i + "2", i + "3", i + "4", i + "5" ], [ i + "1", i + "2", i + "3", i + "4", i + "5" ], [ i + "1", i + "2", i + "3", i + "4", i + "5" ] ],
    responsive: {
      'details': {
        'data': null,
        'type': 'column',
        'target': 9
      }
    },
    'columnDefs': [
    {
      'data': null,
   ...