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>
    <div id="dropdown01" style="min-width:220px;max-width:220px;max-height:25px;overflow:hidden;">
      <button id="button" style="min-width:220px;max-width:220px;max-height:25px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align: left;">Name: </button> 
    </div>
  	<div id="selName" style="width:220px;height:50px;">
    <table 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>Select all</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...

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": "Suche:" },
       "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 }
        ]
    });
    
   $("#selName").focusout(function () {
     if ($(this).has(document.activeElement).length == 0) {
        var dataArr = [];
        var Sname = 'Name: ';
        var con = '';
        $.each($("#table01 tr.selected"),function(){ //get each tr which has selected class
            dataArr.push($(this).find('td').eq(1).text()); //find its second td and push the value
            Sname = Sname + con + $(this).find('td').eq(1).text();
            con = ', ';
        });
//        console.log(Sname);
       $("#button").html(Sname); 
       $('#button').prop('title', Sname);
       $('#table01_wrapper').hide();
     }
   });    
    
   // Handle click on "Select all" control
   $('#table01-select-all').on('click', function(){
      table01.rows({ 'search': 'applied' }).select();
      $('input[type="checkbox"]', rows).attr('checked', this.checked);
    } );
    
    $('#table01 tbody').on( 'click', 'tr', function () {
        $(this).toggleClass('selected');
    } );
    $('#button').on( 'click', function () {
        $('#table01_wrapper').show();
        $('#table01_filter input').focus();
    } );
    $('#table01_wrapper').hide();
    $("#button").button();
    $('#button').button().css( 'font-size', '0.8em' );
} );