JSFiddle - React, Tailwind, and code Playground

by Oscar 11

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css">
<script src="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.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 class="odd_gradeX" id="2">
            <td class="read_only">Trident</td>
            <td>Internet Explorer 4.0</td>
            <td>Win 95+</td>
            <td class="center">4</td>

            <td class="center">#F99</td>
        </tr>
        <tr class="even_gradeC" id="4">
            <td>Trident</td>
            <td>Internet Explorer 5.0</td>
            <td>Win 95+</td>
            <td class="center">5</td>

            <td class="center">#F99</td>
        </tr>
        <tr class="odd_gradeA" id="5">
            <td>Trident</td>
            <td>Internet Explorer 5.5</td>
            <td>Win 95+</td>
            <td class="center">5.5</td>

            <td class="center">#F99</td>
        </tr>
        <tr class="odd_gradeU" id="11">
            <td>All Other browsers</td>
            <td>Unknown</td>
            <td>-</td>

            <td class="center">-</td>
            <td class="center">#9F9</td>
        </tr>
    </tbody>
</table>
</div>

CSS

td.highlight {
        font-weight: bold;
        color: red;
    }

JavaScript

// DataTable
    var table = $('#example').DataTable({
        "order": [[0, 'asc']],
        "drawCallback": function (settings){
            var api = this.api();
        
            // Zero-based index of the column containing names
            var col_name = 0;

            // If ordered by column containing names
            if (api.order()[0][0] === col_name) {
                var rows = api.rows({ page: 'current' }).nodes();
                var group_last = null;

                api.column(col_name, { page: 'current' }).data().each(function (name, index){
                    var group = name;
                    var data = api.row(rows[index]).data();
                    
                    if (group_last !== group) {
                        $(rows[index]).before(
                            '<tr class="group" style="background-color:' + data[4] + '"><td colspan="5">' + group + '</td></tr>'
                        );

                        group_last = group;
                    }
                });
            }
        }
    });