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://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>
            <th>Status</th>
            <th>Subject</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

$(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();
    });

    // 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 {
            // Open this row
            row.child(format(row.data())).show();
            tr.addClass('shown');
        }
    });

});