JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
	<body>
		<div class="container">
			<table id="example" class="display" width="100%">
				<thead>
					<tr>
						<th>Name</th>
						<th>Position</th>
						<th>Office</th>
						<th>Age</th>
						<th>Start date</th>
						<th>Salary</th>
					</tr>
				</thead>

				<tfoot>
					<tr>
						<th>Name</th>
						<th>Position</th>
						<th>Office</th>
						<th>Age</th>
						<th>Start date</th>
						<th>Salary</th>
					</tr>
				</tfoot>

				<tbody>
					<tr>
						<td>Tiger Nixon</td>
						<td>System Architect</td>
						<td>Edinburgh</td>
						<td>61</td>
						<td>2011/04/25</td>
						<td>$3,120</td>
					</tr>
					<tr>
						<td>Garrett Winters</td>
						<td>Director</td>
						<td>Edinburgh</td>
						<td>63</td>
						<td>2011/07/25</td>
						<td>$5,300</td>
					</tr>
					<tr>
						<td>Ashton Cox</td>
						<td>Technical Author</td>
						<td>San Francisco</td>
						<td>66</td>
						<td>2009/01/12</td>
						<td>$4,800</td>
					</tr>
					<tr>
						<td>Cedric Kelly</td>
						<td>Javascript Developer</td>
						<td>Edinburgh</td>
						<td>22</td>
						<td>2012/03/29</td>
						<td>$3,600</td>
					</tr>
					<tr>
						<td>Jenna Elliott</td>
						<td>Financial Controller</td>
						<td>Edinburgh</td>
						<td>33</td>
						<td>2008/11/28</td>
						<td>$5,300</td>
					</tr>
					<tr>
						<td>Brielle Williamson</td>
						<td>Integration Specialist</td>
						<td>New York</td>
						<td>61</td>
						<td>2012/12/02</td>
						<td>$4,525</td>
					</tr>
					<tr>
						<td>Herrod Chandler</td>
						<td>Sales Assistant</td>
						<td>San Francisco</td>
						<td>59</td>
						<td>2012/08/06</td>
						<td>$4,080</td>
					</tr>
					<tr>
						<td>Rhona Davidson</td>
						<td>Integration...

JavaScript

$(document).ready( function () {
  var table = $('#example').DataTable();
  $('#example tr.odd, tr.even').on('click','',function(){
    var myTable = $('#example').DataTable(); /* Re-select so circular referece is not created...we are in doc.ready but in other cases this may prevent potential memory leaks */
    var myRow = myTable.row(this);
      if(myRow.child.isShown()) {
          myRow.child.hide();
      } else {
          var htmlContent = "";
          for(var i = 0, n=10000; i < n; ++i) {
              htmlContent += "<div id='mydiv_"+i+"'>foooooo</div>";
          }
          myRow.child(htmlContent).show();
      }
  });
} );