JSFiddle - React, Tailwind, and code Playground

by Jacob Hulse

HTML

<link rel="stylesheet" href="http://360ehs.com/DataTables-1.10.4/media/css/jquery.dataTables.css">
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.css">
<link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.3/css/dataTables.responsive.css">
<script src="http://360ehs.com/DataTables-1.10.4/media/js/jquery.dataTables.js"></script>
<script src="http://360ehs.com/DataTables-1.10.4/extensions/RowGrouping/jquery.dataTables.grouping.js"></script>
<script src="//cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script src="//cdn.datatables.net/responsive/1.0.3/js/dataTables.responsive.js"></script>
<body>
    <div class="container">
        <table id="example" class="display" width="100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$3,120</td>
                </tr>
                <tr>
                    <td>Garrett Winters</td>
                    <td>Director</td>
                    <td>Edinburgh</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$5,300</td>
                </tr>
     ...

CSS

.group{
    background-color: #CCCCCC !important;
    font-weight: bolder;
}

JavaScript

$(document).ready(function () {
    var table = $('#example').dataTable({
        "responsive": true
    }).rowGrouping(
    {
        iGroupingColumnIndex: 2,
        sGroupingColumnSortDirection: "asc",
        sGroupingClass: "group",
        bSetGroupingClassOnTR: true
    });
});