JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script src="http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/js/jquery.dataTables.rowGrouping.js"></script>
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="display" id="example">
    <thead>
        <tr>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine</th>
            <th>CSS</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Trident</td>
            <td>Internet Explorer 4.0</td>
            <td>Win 95+</td>
            <td class="center">4</td>

            <td class="center">X</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet Explorer 5.0</td>
            <td>Win 95+</td>
            <td class="center">5</td>

            <td class="center">C</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet Explorer 5.5</td>
            <td>Win 95+</td>
            <td class="center">5.5</td>

            <td class="center">A</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet Explorer 6</td>
            <td>Win 98+</td>
            <td class="center">6</td>

            <td class="center">A</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet Explorer 7</td>
            <td>Win XP SP2+</td>
            <td class="center">7</td>

            <td class="center">A</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>AOL browser (AOL desktop)</td>
            <td>Win XP</td>
            <td class="center">6</td>

            <td class="center...

CSS

div#demo{ margin-top:50px;}
div#example_filter{width:100%;}

tr:hover th, tr:hover td {
    background-color:#ebebeb;
    background-image:none;
}
td {
    height:26px;
    padding:0px 0px 0px 20px !important;
    text-align:left;
    border-bottom:1px solid #d0d0d0;
    vertical-align:middle;
    color:#555555;
    background-color:#ffffff;

}
td.group {
    background-color: #d5eafd !important;
    border-bottom: 1px solid #94bafd;
    border-top: 1px solid #94bafd;
}
td.expanded-group {
    background: url("http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/images/minus.jpg") no-repeat scroll left center transparent;
}
tr:hover td.expanded-group {
    background: url("http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/images/minus.jpg") no-repeat scroll left center #c0e1ff !important;
}

td.collapsed-group {
    background: url("http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/images/plus.jpg") no-repeat scroll left center transparent;
}
tr:hover td.collapsed-group {
    background: url("http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/images/plus.jpg") no-repeat scroll left center #c0e1ff !important;
}
.DataTables_sort_wrapper span{
    float: right;
}
.ui-icon {
    background-image: url("http://jquery-ui.googlecode.com/svn-history/r3145/branches/labs/scrollable/ui/css/smoothness/images/ui-icons_454545_256x240.png");
    height: 16px;
    width: 16px;
    background-repeat: no-repeat;
    display: block;
    overflow: hidden;
    text-indent: -99999px;
}
.ui-icon-closethick {
    background-position: -96px -128px;
}
.ui-icon-circle-close {
    background-position: -32px -192px;
}

.float-right {
    float: right;
    margin: 4px 5px 0px 0px; 
}
.float-left {
    float: left;
    margin: 4px 5px 0px 4px;
}
.expandedOrCollapsedGroup{
    width: 125px;
    float: left;
    margin: 0px 0px 0px 0px;
}

JavaScript

var ref;

$(document).ready(function() {
    ref = $('#example').dataTable({
        "bLengthChange": false,
        "bPaginate": false,
        "bJQueryUI": true
    })
    $("#resetsearch").live('click', function(e) {
        ref.fnFilter('');
        GridRowCount();
    });
    ResetSearchField();
});


function ResetSearchField() {
    var dataTableFilter = find(".dataTables_filter");
    $('.dataTables_wrapper').find('.dataTables_filter').append($('<input />', {
        'type': 'image',
        'class': 'ui-icon ui-icon-closethick float-right',
        'id': 'resetsearch'
    }));
};