JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<table id="totalCountTable">
<thead>
  <th>UserGroup</th>
  <th>Share Location</th>
  <th>Distance</th>
</thead>
<tbody>
<tr>
<td  style="vertical-align: middle;"><span id="checkoutUsergroup1848">2ndgroupTest1aaaaaa_123-kkAkshayagroup1stgro_we-ew'wspplie-WE-23_sd</span></td>

<td style="vertical-align: middle;"><span id="checkoutUsergroup1848">Share Location</span></td>

<td style="vertical-align: middle;"><span id="checkoutUsergroup1848">20.00</span></td>
</tr>
<tr>
<td>user group1</td>
<td>72.0000</td>
<td>0.96</td>
</tr>

</tbody>
</table>

JavaScript

totalDataTab = $("#totalCountTable").dataTable (
									{
										"language": {
											 	"sSearch": '',
										        "searchPlaceholder": "Search"
										    },
//										    "ScrollX": "100%",							    
										    "aaSorting": [],
										    "bRetrieve" :true,
										    "bPaginate":false,
										    "bLengthChange": false,
										    "autoWidth": false,
										    "iDisplayLength": 5,
										    "bFilter":true,
										    "bDestroy":false,
										    "bInfo": false,
										    "aoColumns":[{"bSearchable": true,"className":"userGroupNameIndex","sType":"natural"},{"bSearchable": true,"className":"ShareLocationIndex"},{"bSearchable": true,"className": "distanceTravelledIndex","sType" : "natural"}],										    
									});