JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/scroller/1.4.2/js/dataTables.scroller.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">

  <table id="resultTable" class="display nowrap" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>First name</th>
                <th>Last name</th>
                <th>ZIP / Post code</th>
                <th>Country</th>
            </tr>
        </thead>
    </table>

JavaScript

$(document).ready(function() {
        var data = [];
        for ( var i=0 ; i<50000 ; i++ ) {
            data.push( [ i, i, i, i, i ] );
            data.push( [ "", i, "", i, "" ] );
        }
         
        $('#resultTable').DataTable( {
            data:           data,
            deferRender:    true,
            scrollY:        200,
            scrollCollapse: true,
            scroller:       true,
            columnDefs: [
               {type: 'non-empty-string', targets: 0}
            ]
        } );
      jQuery.extend( jQuery.fn.dataTableExt.oSort, {
	    "non-empty-string-asc": function (str1, str2) {
	        if(str1 == "")
	            return 1;
	        if(str2 == "")
	            return -1;
	        return ((str1 < str2) ? -1 : ((str1 > str2) ? 1 : 0));
	    },
	 
	    "non-empty-string-desc": function (str1, str2) {
	        if(str1 == "")
	            return 1;
	        if(str2 == "")
	            return -1;
	        return ((str1 < str2) ? 1 : ((str1 > str2) ? -1 : 0));
	    }
	} );
    } );