JSFiddle - React, Tailwind, and code Playground

by Lakshmana Kumar C

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<div>
        <table id="job_history">
            <thead>
                <tr>
                    <th>
                        Person
                    </th>
                    <th>
                        Activity
                    </th>
                    <th>
                        Time
                    </th>
                    <th>
                        Date
                    </th>
                    <th>
                        Ticket
                    </th>
                    <th>
                        daily group
                    </th>
                    <th>
                        single job group
                    </th>
                    <th>
                        minutes to sum
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        Peter
                    </td>
                    <td>
                        busy work
                    </td>
                    <td>
                        5 minutes
                    </td>
                    <td>
                        5/17/2013
                    </td>
                    <td>
                        12345
                    </td>
                    <td>
                        Job 1<br />
                        <div class='group_sum'>
                        </div>
                    </td>
                    <!--daily group-->
                    <td>
                        5/17/2013
                    </td>
                    <!--single job group-->
                    <td class="minutes_to_sum">
                        5
                    </td>
                    <!--minutes to sum-->
                </tr>
                <tr>
    ...

CSS

.rowCount-grid { float: right; font-size: 15px; color: Red; padding-right: 250px; }
        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; }

JavaScript

$(document).ready(function() {

        });

        $(function() {
            var oTable = $('#job_history').dataTable({
                "aoColumnDefs": [{ "bVisible": false, "aTargets": [4, 5, 6]}],
                "aLengthMenu": [[10, 25, 50, -1], ["Show 10 entries", "Show 25 entries", "Show 50 entries", "Show all entries"]],
                "iDisplayLength": -1,
                "aaSortingFixed": [[5, 'asc']],
                "aaSorting": [[5, 'asc']],
                "bJQueryUI": true,
                "sDom": '<flip>',
                "fnDrawCallback": function(oSettings) {
                    if (oSettings.aiDisplay.length == 0) {
                        return;
                    }

                    // GROUP ROWS
                    var nTrs = $('#job_history tbody tr');
                    var iColspan = nTrs[0].getElementsByTagName('td').length;
                    var sLastGroup = "";

                    for (var i = 0; i < nTrs.length; i++) {
                        var iDisplayIndex = oSettings._iDisplayStart + i;
                        var sGroup = oSettings.aoData[oSettings.aiDisplay[iDisplayIndex]]._aData[5];

                        if (sGroup != sLastGroup) {
                            var nGroup = document.createElement('tr');
                            var nCell = document.createElement('td');
                            nCell.colSpan = iColspan;
                            nCell.className = "group";
                            nCell.innerHTML = sGroup;
                            nGroup.appendChild(nCell);
                            nTrs[i].parentNode.insertBefore(nGroup, nTrs[i]);
                            sLastGroup = sGroup;
                        }
                    }

                    // SUM COLUMNS WITHIN GROUPS
                    var total = 0;
                    $("#job_history tbody tr").each(function(index) {
                        if ($(this).find('td:first.group').html()) {
                            total =...