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,
                "sAjaxSource": "/webservices/datatables.asmx/GetAllTickets",
                "columnDefs": [
                   { orderable: true, "targets": 0,data: "smTicketNo" },
                   { orderable: true, "targets": 1,data: "smEmpName" },
                   { orderable: true, "targets": 2,data: "smStatus" },
                   { orderable: true, "targets": 3,data: "smCustomerName" },
                   { orderable: true, "targets": 4,data: "smProdName" },
                   { orderable: true, "targets": 5,data: "smDateReceived" },
                   { orderable: true, "targets": 6,data: "smWorkStartDate" },
                   { orderable: true, "targets": 7,data: "smWorkEndDate" },
                   { orderable: true, "targets": 8,data: "smTotalTime" },
                   { orderable: false, "targets": 9,data: "smProblemDescription", "sWidth": "30%" },
                   { orderable: true, "targets": 10, data: "smRating" }],         
                "fnServerParams": function (aoData) {
                    aoData.push(
                            { "name": "TicketNo", "value": "" })                       
                  },
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "contentType": "application/json; charset=utf-8",
                        "type": "GET",
                        "url": sSource,
                        "data": aoData,                   
                        "success":
                                    function (data) {                               
                                        var json = JSON.parse(data.d);
                                        alert(json);
                                        fnCallback(json);
                           ...