JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.15/af-2.2.0/fc-3.2.2/r-2.1.1/rg-1.0.0/sc-1.4.2/datatables.css">
<script src="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.15/af-2.2.0/fc-3.2.2/r-2.1.1/rg-1.0.0/sc-1.4.2/datatables.js"></script>

      
      <table id="orderInfoTable" class="uk-table uk-table-hover uk-table-striped" cellspacing="0" width="100%">
                    <thead>
                        <tr></tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th></th>
                            <th>Total</th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                    </tfoot>
                </table>

JavaScript

var data = [{"Action":"<a href=\"javascript:editDetailItem('A',5606)\"><b>Remove</b></a>","Service":"DSL Internet Service","Bundled Service Plan":"G_20170501_ON_Dry_Fi99/m_Processing$29.95_Rental Incl_Shipping$9.95(Mon)","Basic Plan Monthly Fee":79.99,"Discount Amount":35.00,"1st Month Fee":44.99,"Discount Type":"Amount","Discount Month(s)":"24","Prepay Month(s)":0,"Free Month(s)":0},{"Action":"<a href=\"javascript:editDetailItem('A',5607)\"><b>Remove</b></a>","Service":"Home Phone Service","Bundled Service Plan":"Bundle_Free_HP_Basic_Unlimited To Canada_NoLD_with911_$0","Basic Plan Monthly Fee":4.99,"Discount Amount":4.99,"1st Month Fee":0.00,"Discount Type":"Amount","Discount Month(s)":"","Prepay Month(s)":0,"Free Month(s)":0}];

    var table;
    var my_columns = [];
    var api;

    $.each(data[0], function (key, value) {
        var my_item = {};
        my_item.data = key;
        my_item.title = key;
        my_columns.push(my_item);
    });

    function pageFunction() {
        $('#orderInfoTable').DataTable({
            data: data,
            paging: false,
            "columns": my_columns,
            "columnDefs": [
                { "visible": false, "targets": 0 },
                { "orderable": false, "targets": "_all" },
                { "className": "sum", "targets": [3,4,5,7,8,9] },
            ],
            //No defalut search bar in dom
            "dom": 'lrt',
            "scrollX": true,
            "footerCallback": function (row, data, start, end, display) {
                api = this.api(), data;;
                
                api.columns('.sum', {
                    page: 'current'
                }).every(function () {
                     var sum = this
                        .data()
                        .reduce(function (a, b) {
                            var x = parseFloat(a) || 0;
                            var y = parseFloat(b) || 0;
                            return x + y;
                        }, 0);
        ...