JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="http://datatables.net/release-datatables/media/css/demo_table.css">
<table id="example" class="display" >
    <thead>
        <tr>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
        </tr>
    </thead>
<tbody><tr class="rowEven odd">
            
            <td><a href="index.cfm?fuse=Job.getJob&amp;jobId=4715">Job, a (J2D6S-1)</a></td>
            <td><a href="index.cfm?fuse=Job.getJob&amp;jobId=4715">04/14/2011</a></td>
            <td><a href="index.cfm?fuse=Job.getJob&amp;jobId=4715"></a></td>
            <td nowrap="nowrap"><a href="index.cfm?fuse=Job.getJob&amp;jobId=4715">New - Audit Scheduled</a></td>
            <td><a href="index.cfm?fuse=Job.getJob&amp;jobId=4715"></a></td>
            <td><a href="index.cfm?fuse=Job.getJob&amp;jobId=4715">Lomira</a></td>
        </tr><tr class="rowOdd even">
            
            <td><a href="index.cfm?fuse=Job.getJob&amp;jobId=4716">test, test (J2D6Z-1)</a></td>
            <td><a href="index.cfm?fuse=Job.getJob&amp;jobId=4716">04/07/2011</a></td>
            <td><a href="index.cfm?fuse=Job.getJob&amp;jobId=4716"></a></td>
            <td nowrap="nowrap"><a href="index.cfm?fuse=Job.getJob&amp;jobId=4716">New - Application Received</a></td>
            <td><a href="index.cfm?fuse=Job.getJob&amp;jobId=4716"></a></td>
            <td><a href="index.cfm?fuse=Job.getJob&amp;jobId=4716">Hartland</a></td>
        </tr><tr class="rowEven odd">
            
            <td><a href="index.cfm?fuse=Job.getJob&amp;jobId=4717">Job, Test (J2D76-1)</a></td>
            <td><a href="index.cfm?fuse=Job.getJob&amp;jobId=4717"></a></td>
            <td><a href="index.cfm?fuse=Job.getJob&amp;jobId=4717"></a></td>
            <td nowrap="nowrap"><a href="index.cfm?fuse=Job.getJob&amp;jobId=4717">New - Audit...

CSS

@import url(http://fonts.googleapis.com/css?family=Arapey);

body{
    font-family: "Arapey"
}

td{
    vertical-align: top;
    padding:4px;
    background-color: #ADDFF7;
}

.overlay{
    position: absolute;
    border-radius: 5px;
    background-color: #D6D6D6;
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
    z-index:9999;
}

JavaScript

$("table tbody").delegate("tr","click",function(e){
    var elem = $(this),
        height = 0,
        bottom = 0,
        left = 0,
        width = 0,
        newDiv,
        pos = 0;
    
    elem.data('expanded', elem.data('expanded') || false);
    
    e.preventDefault();
    
    (elem.data('expanded')) ? height = 20 : height = 150;

    elem.children().filter("td").animate({"height" : height});
    
    pos = elem.position();
    
    
    if(!elem.data('div')){
        elem.data('div',createDiv({left:pos.left, top: pos.top + 20, height: 0, width: elem.parent().parent().width()}));
    }
    
    newDiv = elem.data('div');
    
    if(elem.data('expanded')){
       newDiv.animate({height: 0});
        elem.data('expanded',false);
    }
    else{
        console.log('expand');
        
       newDiv.animate({height: 130});
        elem.data('expanded',true);
    }
    
    $("table").after(newDiv);
});
    
function createDiv(options){
    
    var options = options || {};
    var defaultOptions = {width: 300, height: 150, bottom : 0, left : 0, content : "Hello World!"};
    var div = $('<div class="overlay"></div>');

    $.extend(defaultOptions,options);        
    
    div.css("width",options.width)
       .css("height",options.height)
       .css("top",options.top)
       .css("left",options.left)
       .html(options.content);
    
    return div;    
}

$('#example').dataTable();