JSFiddle - React, Tailwind, and code Playground

by Eric L

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">  
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">-->


  
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">    
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.0/css/buttons.dataTables.min.css">
    
   
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>  
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>    
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.0/js/dataTables.buttons.min.js"></script>
    
        <div class="table-responsive col-sm-12">
          <table id="stagingLocationTable" class="table table-striped table-bordered table-responsive"></table> 
        </div>

JavaScript

data =  [
    {
      "lSelected": false,
      "cStagingLoc": "123456789",
      "cLocType": "TEST",
      "iDockNumber": 45,
      "iSortLane": 66,
      "cSortType": "MISC",
      "cPrimaryWrap": "",
      "cSecondaryWrap": "",
      "cAltWrap": "",
      "cPrimaryDest": "",
      "cSecondaryDest": "",
      "cAltDest": "",
      "cProductType": "SOC",
      "cScanArea": "Xdock",
      "iPalletDepth": 1,
      "iPalletHeight": 48,
      "lUsable": true
    },
    {
      "lSelected": false,
      "cStagingLoc": "111111111",
      "cLocType": "TEST",
      "iDockNumber": 115,
      "iSortLane": 66,
      "cSortType": "MISC",
      "cPrimaryWrap": "",
      "cSecondaryWrap": "",
      "cAltWrap": "",
      "cPrimaryDest": "",
      "cSecondaryDest": "",
      "cAltDest": "",
      "cProductType": "SOC",
      "cScanArea": "Xdock",
      "iPalletDepth": 1,
      "iPalletHeight": 48,
      "lUsable": true
    },
    {
      "lSelected": false,
      "cStagingLoc": "222222222",
      "cLocType": "TEST",
      "iDockNumber": 34,
      "iSortLane": 66,
      "cSortType": "MISC",
      "cPrimaryWrap": "",
      "cSecondaryWrap": "",
      "cAltWrap": "",
      "cPrimaryDest": "",
      "cSecondaryDest": "",
      "cAltDest": "",
      "cProductType": "SOC",
      "cScanArea": "Xdock",
      "iPalletDepth": 1,
      "iPalletHeight": 48,
      "lUsable": true
    }
  ]
  var stagingLocationTableDT;
  initializeStagingLocationsDataTable(data)
  
  function initializeStagingLocationsDataTable(stagingLocationInfo) {  
     if(stagingLocationTableDT != null){
      selectedLoadRow = null;
      stagingLocationTableDT.clear().draw();
      stagingLocationTableDT.destroy();
      $('#stagingLocationTable').empty();
    } 
    
    var stagingLocationTableDTOptions = {
      order: [
          [1, "asc"]
      ],
      paging: false,
      pageLength: 25,
      stripeClasses: [],
      responsive: true,
      scrollY: 250,
      info: "true",
      scrollCollapse: true,
     ...