JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="container">
        <table class="table table-striped table-bordered table-hover dataTable" id="account">
            <thead>
                <tr>
                    <th>Company</th>
                    <th>Branch</th>
                    <th>AccNo</th>
                    <th>TransCode</th>
                    <th>Amount</th>
                </tr>
            </thead>
        </table>
    </div>
</body>

JavaScript

$(document).ready(function () {
    Load();
});

function Load() {
    var account = $("#account").dataTable({
        "sDom": 'T<"clear"><"H"lfr>t<"F"ip>',
            "oTableTools": {
            "sSwfPath": "../Content/swf/copy_csv_xls_pdf.swf",
                "aButtons": ["copy", "pdf", "csv", "print"]
        },
            "sPaginationType": "bootstrap",
            "oLanguage": {
            "sLengthMenu": "Displaying _MENU_ records per page"
        },
            "sAjaxSource": url + 'Account/Fetch',
            "bProcessing": false,
            "bServerSide": true,
            "bFilter": false,
            "aoColumnDefs": [{
            "aTargets": [0],
            "bSortable": false,
            "mDataProp": "Company",
            "sWidth": "105px",
            fnRender: function (col) {
                return "<font style='color:red; font-weight: bold; margin-left: 10px;'>" + col.aData.Company + "</font>";
            }
        }, {
            "aTargets": [1],
            "bSortable": true,
            "mDataProp": "Branch",
            "sWidth": "105px",
            fnRender: function (col) {
                return "<font style='color:blue; font-weight: bold; margin-left: 10px;'>" + col.aData.Branch + "</font>";
            }
        }, {
            "aTargets": [2],
            "bSortable": false,
            "mDataProp": "AccNo"
        }, {
            "aTargets": [3],
            "bSortable": false,
            "mDataProp": "TransCode"
        }, {
            "aTargets": [4],
            "bSortable": false,
            "mDataProp": "Amount"
        }]
    }).rowGrouping({
        iGroupingColumnIndex: 0,
        iGroupingColumnIndex2: 1,
        bExpandableGrouping: true,
        iExpandGroupOffset: -1
    });

    $("#account").css({
        "width": "100%"
    });


}