JSFiddle - React, Tailwind, and code Playground

HTML

<table id="transactionTbl" class="table table-bordered">
    <thead>
        <tr>
            <th>Transaction ID</th>
            <th>Sr No.</th>
            <th>Investor Name</th>
            <th>Borrower Name</th>
            <th>Amount</th>
            <th>Financial Year</th>                                   
            <th>Start Date</th>
            <th>Due Date</th>
            <th>Period</th>
            <th>Status</th>
        </tr>
    </thead>
</table>

JavaScript

$('#transactionTbl').dataTable( {
        "processing": true,
        "serverSide": true,
        "draw" : 1,
        "start":0,
        "ajax": "<?php echo $this->config->base_url('api/transactionList')?>",
        "columns":[
            { data: 'T_Id' },
            { data: 'T_Sr'},
            { data: 'I_Id' },
            { data: 'B_Id' },
            { data: 'amount'},
            { data: 'financial_year' },
            { data: 'start_date'},
            { data: 'due_date'},
            { data: 'period'},
            { data: 'status'}
        ]
    } );