JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<table id="resProDataTable" class="display table table-bordered table-striped">
<thead>
<tr class="bg-aqua">
<th>Ticket</th>
<th>Employee</th>
<th>Status</th>
<th>Customer</th>
<th>Product</th>
<th>ReceivedDate</th>
<th>Start Date</th>
<th>End Date</th>
<th>Total</th>
<th>Problem Description</th>
<th>Rating</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
JavaScript
$(document).ready(function () {
$("#resProDataTable").DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"type": "POST",
"url": "/webservices/datatables.asmx/GetAllTickets",
"contentType": "application/json; charset=utf-8",
"dataType": "json"
},
"columns": [
{ "data": "smTicketNo" },
{ "data": "smEmpName" },
{ "data": "smStatus" },
{ "data": "smCustomerName" },
{ "data": "smProdName" },
{ "data": "smDateReceived" },
{ "data": "smWorkStartDate" },
{ "data": "smWorkEndDate" },
{ "data": "smTotalTime" },
{ "data": "smProblemDescription"},
{ "data": "smRating" }]
});
});