JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.js"></script>
           <table id="maintable" class="main">
                <thead>
                    <tr>
                    <th>
                    No.
                    </th>
                    <th>
                    Delivery Date
                    </th>
                    <th>
                    Counter Party
                    </th>
                    <th>
                    Buy or<br>Sell
                    </th> 
                    <th>
                    Underlying Type
                    </th>
                    <th>
                    Product<br>Type
                    </th>
                    <th>
                    Pricing<br>Structure                       
                    </th>
                    <th>
                    Fixed Price
                    </th>
                    <th>
                    Discount<br>Provisions
                    </th>
                    <th>
                    Size (lbs) $<br>For Inflation
                    </th>
                    <th>
                    Strike<br>If Option)
                    </th>
                    <th>
                    Base Esc<br>Start Date
                    </th>
                    <th>
                    Underlying<br>Market
                    </th>
                    <th>
                    Actual Value
                    </th>
                    <th>
                    Total Asset<br>or Liability
                    </th>
                    <th bgcolor="#24248f">
                    P&L vs Market
                    </th>
                    <th bgcolor="#3333cc">
                    Delta U
                    </th>
   ...

JavaScript

var id = 0;

$(function() {$( ".datepicker" ).datepicker({ dateFormat: "yy-mm-dd" });
    });  

$.fn.dataTable.ext.order['dom-text'] = function  ( settings, col )
{
    return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
        return $('input', td).val();
    } );
}

$.fn.dataTable.ext.order['dom-text-numeric'] = function  ( settings, col )
{
    return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
        return $('input', td).val() * 1;
    } );
}

$.fn.dataTable.ext.order['dom-select'] = function  ( settings, col )
{
    return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
        return $('select', td).val();
    } );
}

$(document).ready(function() {
	$('#maintable').DataTable( {
                "aoColumns": [
              null,
            { "orderDataType": "dom-text-numeric", "sType": "date-uk"},
            { "orderDataType": "dom-select" },
            { "orderDataType": "dom-select" },
            { "orderDataType": "dom-select" },
            { "orderDataType": "dom-select" },
            { "orderDataType": "dom-select" },
            { "orderDataType": "dom-text-numeric" },
            { "orderDataType": "dom-text-numeric" },
            { "orderDataType": "dom-text-numeric" },
            { "orderDataType": "dom-text-numeric" },
            { "orderDataType": "dom-text-numeric" },
            { "orderDataType": "dom-text", "type": "numeric"  },
            { "orderDataType": "dom-text", "type": "numeric"  },
            { "orderDataType": "dom-text", "type": "numeric"  },
            { "orderDataType": "dom-text", "type": "numeric"  },
              null,
              null,
              null,
              null
                ]
    } );
});

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"date-uk-pre": function ( a ) {
    var ukDatea = a.split('-');
    return (ukDatea[0] + ukDatea[1] + ukDatea[2]) * 1;
}
});

function addRow() {
id ++;
var place = id...