JSFiddle - React, Tailwind, and code Playground

by survivant

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<div id="button_refresh" style="width: 50px; height: 20px; background-color: red"></div>
<table id="example" class="display DataTable" cellspacing="0" 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>

        <tbody>
            <tr><td>Tiger Nixon</td><td>System Architect</td><td>Edinburgh</td><td>61</td><td>2011/04/25</td><td>$320,800</td></tr>
            <tr><td>Garrett Winters</td><td>Accountant</td><td>Tokyo</td><td>63</td><td>2011/07/25</td><td>$170,750</td></tr>
            <tr><td>Ashton Cox</td><td>Junior Technical Author</td><td>San Francisco</td><td>66</td><td>2012/12/02</td><td>$86,000</td></tr>
            

        </tbody>
    </table>

JavaScript

var tableTh = $('#example thead').html();

$(document).ready(function() {
    $('#example').DataTable({
    "columns": [
            { "data": "etat" },
            { "data": "dest" },
            { "data": "message" },
            { "data": "exp" },
            { "data": "date" },
            { "data": "extra" }
            ],
            "order": [[ 4, "desc" ]],
            "responsive": false,
    drawCallback: function (settings) {
                var api = this.api();
                var rows = api.rows({ page: 'current' }).nodes();
                var last = null;

                api.column(4, { page: 'current' }).data().each(function (group, i) {

                    if (last !== group) {

                        $(rows).eq(i).before(
                        /*
                            '<tr class="group"><td colspan="8" style="BACKGROUND-COLOR:rgb(237, 208, 0);font-weight:700;color:#006232;">' + 'GRUPO ....' + group  + '</td></tr>'
                            */
                            tableTh
                            //$('#example thead').html();
                            //alert($('#example thead').html());
                        );

                        last = group;
                    }
                });
            }
		 
    });
    
   
    
    $('#button_refresh').click(function() {
      	alert($('#example thead').html());
    });

} );