JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.1/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Search</th>
<th>Location</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="4268a5a2-be22-4869-9b30-0e80d54844c9" name="4268a5a2-be22-4869-9b30-0e80d54844c9" maxlength="20" value="query 1">
</td>
<td>x</td>
<td>
<b>Subject:</b><br />
-<i>English:</i>Meena K<br />
-<i>Maths:</i>Ramaya<br />
<b>Hours:</b><br />
-<i>monday</i>:8<br />
</td>
</tr>
<tr>
<td>2</td>
<td>y</td>
<td>
<b>English:</b>Meena K<br />
<b>Maths:</b>Ramaya<br />
</td>
</tr>
<tr>
<td>3</td>
<td>z</td>
<td>
<b>Subject:</b><br />
-<i>English:</i>Reena<br />
-<i>Maths:</i>Peeter<br />
<b>Hours:</b><br />
-<i>tuesday</i>:8<br />
</td>
</tr>
<tr>
<td>4</td>
<td>a</td>
<td>
<b>Subject:</b><br />
-<i>English:</i>Meena K<br />
-<i>Maths:</i>Ramaya<br />
<b>Hours:</b><br />
-<i>wednesday</i>:8<br />
</td>
</tr>
<tr>
<td>5</td>
<td>b</td>
<td>
<b>English:</b>Meena K<br />
...
JavaScript
$(document).ready(function() {
var table = $('#example').DataTable( {
"columnDefs": [{
"type": "html", "targets": 1
}]
} );
} );