JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<script src="https://www.datatables.net/examples/resources/details_open.png"></script>
<table id="table_id" class="display" cellspacing="0" width="100%" >
             <thead>
                 <tr>
                   <th ></th>
                   <th >name</th>
                   <th>UID</th>
                   <th>pgroup</th>
                   <th>sgroup</th>
                   <th>Gecos</th>
                   <th>home</th>
                   <th>shell</th>
                   <th>status</th>
                   <th>info</th>
                </tr>
            </thead>
          <tbody>
              <tr class="odd" role="row">
              <td class=" details-control"></td>
              <td class="sorting_1">aandino</td>
              <td>2198</td>
              <td>staff</td>
              <td>eis</td>
              <td>po=augusto andino</td>
              <td>/home/aandino</td>
              <td>ss</td>
              <td>Y</td>
              <td>ss</td>
              </tr>
         </tbody>
         <tfoot>
            <tr>
                   <th> </th>
                   <th>name</th>
                   <th>UID</th>
                   <th>pgroup</th>
                   <th>Sgroup</th>
                   <th>gecos</th>
                   <th>home</th>
                   <th>Shell</th>
                   <th>Status</th>
                   <th>Info</th>
          </tr>
       </tfoot>
     </table>

CSS

td.details-control {
    background: url('https://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.details td.details-control {
    background: url('https://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}

JavaScript

function format ( d ) {
           return 'File size : '+d.fsize+'<br>CPU : '+d.cpu+'<br>Data : '+d.data+'<br> Stack: '+d.stack+'<br>'+
           'Core : '+d.core+'<br>RSS :'+d.RSS+'<br>Number of open files : '+d.nofiles+'';
        }
        $(document).ready( function () {
            var dt =  $('#table_id').DataTable({
                "autoWidth": false,
                scrollX: true,
                dom: 'lfrtip',
                buttons: [
                    { extend: 'colvis', text: 'Show/Hide' },
                    {
                        extend: 'collection',
                        text: 'Tools',
                        buttons : [ 'copy', 'csv', 'pdf', 'print' ]
                    }
                ],
                "processing": true,
                "serverSide": true,
                "ajax":    "cgi-bin/userdb_server_side_processing.php",
                // entry display menu
                "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"] ],
                // How many entry displayed by default
                "pageLength": 25,
                // Only put column you want to be displayed. Other will be inserted in d.'val'
                // By the ajax script (look in the function above).
                "columnDefs": [
                    { "width": "30px", "targets": 0 },
                    { "width": "60px", "targets": 1 },
                    { "width": "40px", "targets": 2 },
                    { "width": "60px", "targets": 3 },
                    { "width": "60px", "targets": 4 },
                    { "width": "200px", "targets": 6 },
                    { "width": "60px", "targets": 7 },
                    { "width": "30px", "targets": 8 },
                    { "width": "600px", "targets": 9 }
                 ],
                "columns": [
                    {
                        "class":          "details-control",
                        "orderable":      false,
                        "data":           null,
      ...