JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<table id="example" class="display">
    <thead>
        <tr>
            <th> Example </th>
            <th> Data </th>
            <th> Table </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> 0 </td>
            <td> 0 </td>
            <td> 0 </td>
        </tr>
        <tr>
            <td> 1 </td>
            <td> 1 </td>
            <td> 1 </td>
        </tr>
        <tr>
            <td> 2 </td>
            <td> 2 </td>
            <td> 2 </td>
        </tr>
    </tbody>
</table>

CSS

table.dataTable.display tbody tr.child {
    background: white;
}
table.dataTable.display tbody tr table tr:hover {
    background: none;
}

JavaScript

$(document).ready(function() {
    var table = $('#example').DataTable({bPaginate:false, bFilter:false});
    $('#example tbody').on('click', 'tr', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(), 'child' ).show();
            tr.addClass('shown');
        }
    } );
} );

function format() {
    var formatString = "<table>";
    formatString += "<tbody>";
    formatString += "<tr>";
    formatString += "<td>Child</td>";
    formatString += "<td>data</td>";
    formatString += "</tr>";
    formatString += "<tr>";
    formatString += "<td>Child</td>";
    formatString += "<td>data</td>";
    formatString += "</tr>";
    formatString += "</tbody>";
    formatString += "</table>";
    return formatString
}