JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script src="http://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-name="Event1,Event2" data-child-value="Event1,Event2" data-child-url="Event1,Event2"  data-child-tester="Event1,Event2" >
            <td class="details-control"></td>
            <td>*Table Data*</td>
            <td>*Table Data*</td>
            <td>*Table Data*</td>
            <td>*Table Data*</td>
        </tr>
        <tr data-child-value="test value">
            <td class="details-control"></td>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
    </tbody>
</table>

CSS

@import url('//cdn.datatables.net/1.10.2/css/jquery.dataTables.css');
 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.no-padding {
    padding: 0;
}

JavaScript

function format(value, name, url, tester) {
        var split1 = value.split(",");
        var split2 = name.split(",");
        var split3 = url.split(",");
        var split4 = tester.split(",");
      
    var output = "<table width='100%'>"
      
      for(x=0;x < split1.length; x++){
          output+= "<tr>";
          output+= "<td>" + split1[x] + "</td>";
          output+= "<td>" + split2[x] + "</td>";
          output+= "<td>" + split3[x] + "</td>";
          output+= "<td>" + split4[x] + "</td>";
          output+= "</tr>";
      }
    
    output += "</table>";
    return output;
}

$(document).ready(function () {
      var table = $('#example').DataTable({});

      $('#example').on('click', 'td.details-control', function () {
          var tr = $(this).closest('tr');
          var row = table.row(tr);

          if (row.child.isShown()) {
              row.child.hide();
              tr.removeClass('shown');
          } else {
              row.child(
                  format(tr.data('child-value'),
                         tr.data('child-name'),
                         tr.data('child-url'),
                        tr.data('child-tester')),
                  'no-padding'
              ).show();
              tr.addClass('shown');
          }
      });
  });