JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.css">
<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>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="tblCasesMain">
    <thead>
        <tr>
            <td></td>
            <th>Options</th>
            <th>CasesId</th>
            <th>ClientCode</th>
            <th>ClientName</th>
            <th>ContactPhone</th>
            <th>Product</th>
            <th>Status</th>
            <th>Subject</th>
            <th>RecordedBy</th>
            <th>OwnerName</th>
            <th>ContactPerson</th>
            <th>CompletionDate</th>
            <th>Completed</th>
            <th>DescriptionProblem</th>
            <th>EntityFId</th>
            <th>StartedDate</th>
            <th>CompletionPerson</th>
            <th>FurtherAction</th>
            <th>ProductVersion</th>
            <th>TimeTaken</th>
        </tr>
    </thead>
    <tbody>
        <tr class="gradeU">
            <td class="details-control"></td>
            <td style="width:120px;"></td>
            <td>1234</td>
            <td>ABC</td>
            <td>xxxxxxxx</td>
            <td>1234563</td>
            <td>AW</td>
            <td>STARTED</td>
            <td>Support</td>
            <td>XYZ</td>
            <td>CVBs</td>
            <td>SSSSS</td>
            <td>07/08/2014</td>
            <td>Unchecked</td>
            <td>
                <p>test</p>
            </td>
            <td>965</td>
            <td>07/08/2014</td>
            <td>zaq</td>
            <td>NONE</td>
            <td></td>
            <td>1</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <th>Options</th>
            <th>CasesId</th>
            <th>ClientCode</th>
            <th>ClientName</th>
            <th>ContactPhone</th>
            <th>Product</th>
       ...

CSS

td.details-control {
    background: url('http://datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('http://datatables.net/examples/resources/details_close.png') no-repeat center center;
}

JavaScript

/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>'+d.name+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+d.extn+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}

$(document).ready(function () {
    oTable = $('#tblCasesMain').dataTable({
        "aaSorting": [
            [ 2 , "asc"]
        ],
            "bJQueryUI":  "true" ,
            "sPaginationType": "full_numbers",
            "iDisplayLength": 100,
            "aLengthMenu": [
            [10, 25, 50, 100, 200, -1],
            [10, 25, 50, 100, 200, "All"]
        ],
            "sDom": 'T<"clear"><"H"lfr>t<"F"ip>'      
    });

    //This highlights the row selected
    $("#tblCasesMain tbody").on("click", function (event) {
        $(oTable.fnSettings().aoData).each(function () {
            $(this.nTr).removeClass('row_selected');
        });
        $(event.target.parentNode).addClass('row_selected');
    });
    $("#tblCasesMain").on("dblclick", "tr", function () {
        var iPos = oTable.fnGetPosition(this);

        var aData = oTable.fnGetData(iPos);
        var iId = aData[1];
        $('#edit' + iId).click();
    });
    
    var oTable = $('#tblCasesMain').DataTable();

    // Add event listener for opening and closing details
    $('#tblCasesMain tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = oTable.row(tr);

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        } else {
            //...