JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<div class="dataTables_wrapper form-inline table-responsive no-footer" id="totalCountTable_wrapper">
  <div class="row">
    <div class="col-sm-6"></div>
    <div class="col-sm-6">
      <div class="dataTables_filter hide" id="totalCountTable_filter">
        <label></label>
      </div>
    </div>
  </div>
  <table class="table table-striped table-bordered no-margin text-center dataTable no-footer" id="totalCountTable" role="grid">
    <thead>
      <tr role="row">
        <th aria-controls="totalCountTable" aria-label=" User Name : activate to sort column ascending" class="userNameIndex text-center sorting" colspan="1" rowspan="1" style="vertical-align: middle;" tabindex="0">User Name</th>
        <th aria-controls="totalCountTable" aria-label=" Name : activate to sort column ascending" class="nameIndex text-center sorting" colspan="1" rowspan="1" style="vertical-align: middle;" tabindex="0">Name</th>
        <th aria-controls="totalCountTable" aria-label=" Location / Map : activate to sort column ascending" class="locationIndex text-center sorting" colspan="1" rowspan="1" style="width: 22%; vertical-align: middle;" tabindex="0">Location / Map</th>
        <th aria-controls="totalCountTable" aria-label=" Speed : activate to sort column ascending" class="speedIndex text-center sorting" colspan="1" rowspan="1" style="vertical-align: middle;" tabindex="0">Speed</th>
        <th aria-controls="totalCountTable" aria-label=" Battery : activate to sort column ascending" class="batteryIndex text-center sorting" colspan="1" rowspan="1" style="vertical-align: middle;"...

JavaScript

$(document).ready(function() {
  totalDataTab = $("#totalCountTable").dataTable({
    "language": {
      "sSearch": '',
      "searchPlaceholder": "Search"
    },
    "ScrollY": "100%",
    "aaSorting": [],
    "bRetrieve": true,
    "bPaginate": false,
    "bLengthChange": false,
    "autoWidth": false,
    "iDisplayLength": 5,
    "bFilter": true,
    "bDestroy": false,
    "bInfo": false,
    "aoColumns": [{
      "bSearchable": true,
      "className": "userNameIndex"
    }, {
      "bSearchable": true,
      className: "nameIndex"
    }, {
      "sWidth": "22%",
      "bSearchable": true,
      className: "locationIndex"
    }, {
      "bSearchable": true,
      'bSortable': true,
      className: "speedIndex",
      "sType": "num"
    }, {
      "bSearchable": true,
      className: "batteryIndex",
      "sType": "pct",
      "aTargets": [0]
    }, {
      "bSearchable": true,
      className: "lastUpdateIndex"
    }, {
      "bSearchable": true,
      className: "CoordinateIndex"
    }, {
      "bSearchable": true,
      "className": "distanceTravelledIndex"
    }, {
      "bSearchable": true,
      className: "placeVisitedIndex"
    }, {
      "bSearchable": true,
      className: "processCountIndex"
    }, {
      "bSearchable": true,
      className: "placeTaggedIndex"
    }, {
      "bSearchable": true,
      className: "statusIndex"
    }, {
      "bSearchable": true,
      "className": "settingIndex",
      "bSort": false
    }, {
      "bSearchable": true,
      "className": "userGroupNameIndex"
    }, {
      "bSearchable": true,
      "className": "ShareLocationIndex"
    }],
  });
});