JSFiddle - React, Tailwind, and code Playground

by Muhammad Mushtaq Sheikh

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" 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>
  <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>$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>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
    </tr>
    <tr>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>San Francisco</td>
      <td>59</td>
      <td>2012/08/06</td>
      <td>$137,500</td>
    </tr>
    <tr>
      <td>Rhona Davidson</td>
      <td>Integration Specialist</td>
      <td>Tokyo</td>
     ...

CSS

tr.group,
tr.group:hover {
    background-color: #ddd !important;
}
tr.details-control {
	background: url('https://datatables.net/examples/resources/details_open.png') no-repeat left;
	cursor: pointer;
}
tr.shown tr.details-control {
	background: url('https://datatables.net/examples/resources/details_close.png') no-repeat left;
}

JavaScript

$(document).ready(function() {
    var table = $('#example').DataTable({
        "columnDefs": [
            { "visible": false, "targets": 2 }
        ],
        "order": [[ 2, 'asc' ]],
        "displayLength": 25,
        "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last=null;
 
            api.column(2, {page:'current'} ).data().each( function ( group, i ) {
            debugger;
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                        '<tr class="group details-control"><td colspan="5">'+group+'</td></tr>'
                    );
 
                    last = group;
                    $(rows).eq( i ).hide();
                }
                else{
                $(rows).eq( i ).hide();
                }
            } );
        }
    } );
     // Add event listener for opening and closing details
    $('#example tbody').on('click', 'tr.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 alert(row);
        //if ( row.child.isShown() ) {
            //// This row is already open - close it
          //  row.child.hide();
            //tr.removeClass('shown');
        //}
        //else {
            //// Open this row
          //  row.child( format(row.data()) ).show();
            //tr.addClass('shown');
        //}
    } );
 
    
} );