JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap4.min.css">
<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.4/js/dataTables.bootstrap4.min.js"></script>
<table class="table table-bordered table-hover table-sm dataTable" id="ingInsert" width="100%" cellspacing="0" data-page-length="200" border="1" role="grid" aria-describedby="ingInsert_info" style="width: 100%;">
   <thead>
      <tr role="row">
         
         <th align="left" class="sorting" tabindex="0" rowspan="1" colspan="1" style="width: 58.2px;">Date</th>
         <th align="right" title=" Amount" class="sorting_desc" tabindex="0" rowspan="1" colspan="1" style="width: 83.2px;" aria-sort="descending"> Amount</th>
         <th align="right" title=" Paid" class="sorting" tabindex="0" aria-controls="ingInsert" rowspan="1" colspan="1"style="width: 83.2px;"> Paid</th>
         <th align="right" title=" Balance" class="sorting_disabled" rowspan="1" colspan="1" aria-label=" Balance" style="width: 352.4px;"> Balance</th>
         
      </tr>
   </thead>
   <tbody>
      <tr role="row" class="odd">
         <td>2022-01-24</td>
         <td class="sorting_1">$75.00</td>
         <td>$0.00</td>
         <td>$75.00 <a href="payment.cfm?188BCB8E-D24B-6E6F-810B6641D1ABEADA=188BCB8F-DD16-DA7E-866CCF38DD0C4FFD&amp;PostID=6002JA425A5E585E4E5070441&amp;Task=VerifyPost"><button type="button" class="btn btn-primary btn-sm" title="Verify Payment" style="font-size: 9px;">Pay</button></a></td>
         
        
      </tr>
      <tr role="row" class="even">
         
         
         <td>2022-01-24</td>
         <td class="sorting_1">$50.00</td>
         <td>$0.00</td>
         <td>$50.00 <a href="payment.cfm?188BCBC8-F77E-3A55-108DA14DB4193747=188BCBC9-CCB5-31C1-330F77D536A02B12&amp;PostID=6402JA425A5E5E5A4EB090441&amp;Task=VerifyPost"><button type="button" class="btn btn-primary btn-sm" title="Verify...

JavaScript

// SUM PLUGIN
jQuery.fn.dataTable.Api.register( 'sum()', function ( ) {

		var numVal = function ( i ) {
    
    	if (typeof i === 'string' ) {
      	// Remove html tags
      	i = i.replace(/<[^>]*>?/gm, '');;

				// Remove everything but digits and period
      	i = i.replace(/[^0-9\.]/g, '');
        
        // Convert string to float
        i = parseFloat(i);
      }
                return i;
            };
    return this.flatten().reduce( function ( a, b ) {
 
        return numVal(a) + numVal(b);
    }, 0 );
});


var oTable = $("#ingInsert").DataTable({
  "bFilter": true,
  "pagingType": "full_numbers",
  "deferRender":true,
  "processing": true,
  "footerCallback": function () {
      var api = this.api(),
          columns = [1,2, 3];
      for (var i = 0; i < columns.length; i++) {
          $('tfoot th').eq(columns[i]).html(api.column(columns[i], {page:'current'}).data().sum());
          //$('tfoot th').eq(columns[i]).append(api.column(columns[i], {page:'current'}).data().sum());
      }
  }
  });