JSFiddle - React, Tailwind, and code Playground

by defaz

HTML

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
  <body>
  	<button id="button">count selected rows</button>
  	<div id="selName" style="width:220px;height:50px;">
    <table width="120px;" class="display" id="table01" cellspacing="0">
        <thead>
            <tr>
            	  <th></th>
                <th>Select all</th>
                <th>Position</th>
            </tr>
        </thead>
        <tbody>
            <tr id="table01-select-all">
            	  <td></td>
                <td>Select all</td>
                <td>System Architect</td>
            </tr>
            <tr>
            	  <td></td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
            </tr>
            <tr>
            	  <td></td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
            </tr>
            <tr>
            	  <td></td>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
            </tr>
            <tr>
            	  <td></td>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
            </tr>
            <tr>
            	  <td></td>
                <td>Airi Satou</td>
                <td>Accountant</td>
            </tr>
            <tr>
            	  <td></td>
                <td>testname 01</td>
                <td>testpos  01</td>
            </tr>
            <tr>
            	  <td></td>
                <td>testname 02</td>
                <td>testpos  02</td>
            </tr>
            <tr>
            	  <td></td>
                <td>testname 03</td>
                <td>testpos  03</td>
            </tr>
            <tr>
 ...

CSS

.dataTables_wrapper table thead{
      display:none;
    }  
    .no-footer.dataTables_wrapper .dataTables_scrollBody{
    	border:0px;
    }

JavaScript

$(document).ready(function() {
    var table01 = $('#table01').DataTable({
    	 "language": { "search": "Name:" },
       "bSort": false,
    	 "bInfo": false,
       paging: false,
       scrollY: 200,    	
        "columnDefs": [ 
            { targets: 0, orderable: false, searchable:false,               width: 20, className: 'select-checkbox'
            },
            { targets: 1, orderable: false, width: 200 },
            { "targets": [ 2 ], "visible": false, "searchable": false }
        ]
     , select: {
            style:    'os',
            selector: 'td:first-child'
        } 
    });
    
   
    $('#table01_wrapper').on
       ('focusout','.dataTables_scroll', function() {
        $('#table01_wrapper .dataTables_scroll').hide();
    })
    
    
   // Handle click on "Select all" control
   $('#table01-select-all').on('click', function(){
      var rows = table01.rows({ 'search': 'applied' }).nodes();
      $('input[type="checkbox"]', rows).attr('checked', this.checked);
    } );
    
    
    
    $('#table01 tbody').on( 'click', 'tr', function () {
        $(this).toggleClass('selected');
    } );
    $('#table01_filter').on( 'click', function () {
        $('#table01_wrapper .dataTables_scroll').show();
    } );
    $('#button').click( function () {
        alert( table01.rows('.selected').data().length +' row(s) selected' );
    } );
    $('#table01_wrapper .dataTables_scroll').hide();
    
    //xxxx
    document.getElementById("selName").onfocus = function() {
      alert('focused');
    }
} );