JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Date</th>
      <th>Portfolio</th>
      <th>Symbol</th>
      <th>Value</th>
      <th>Payment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2020-11-30</td>
      <td>ISA</td>
      <td>RLSEB</td>
      <td>30000</td>
      <td>30</td>
    </tr>
    <tr>
      <td>2021-06-30</td>
      <td>ISA</td>
      <td>GSK</td>
      <td>44000</td>
      <td>30</td>
    </tr>
    <tr>
      <td>2020-11-30</td>
      <td>ISA</td>
      <td>GSK</td>
      <td>44000</td>
      <td>30</td>
    </tr>
    <tr>
      <td>2020-11-27</td>
      <td>DEA</td>
      <td>GSK</td>
      <td>26000</td>
      <td>30</td>
    </tr>
    <tr>
      <td>2021-02-30</td>
      <td>ISA</td>
      <td>RLSEB</td>
      <td>30000</td>
      <td>50</td>
    </tr>
    <tr>
      <td>2021-05-30</td>
      <td>ISA</td>
      <td>RLSEB</td>
      <td>30000</td>
      <td>54</td>
    </tr>
    <tr>
      <td>2021-05-30</td>
      <td>ISA</td>
      <td>RLSEB</td>
      <td>30000</td>
      <td>57</td>
    </tr>
    <tr>
      <td>2021-05-30</td>
      <td>DEA</td>
      <td>RLSEB</td>
      <td>20000</td>
      <td>27</td>
    </tr>
    <tr>
      <td>2021-05-30</td>
      <td>DEA</td>
      <td>RLSEB</td>
      <td>20000</td>
      <td>27</td>
    </tr>
    <tr>
      <td>2021-05-30</td>
      <td>ISA</td>
      <td>RLSEB</td>
      <td>30000</td>
      <td>31</td>
    </tr>
    <tr>
      <td>2021-05-30</td>
      <td>DEA</td>
      <td>RLSEB</td>
      <td>20000</td>
      <td>22</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3" style="text-align:right">Total:</th>
      <th></th>
    </tr>
  </tfoot>
</table>

CSS

th { white-space: nowrap; }

JavaScript

$(document).ready(function() {
  $('#example').DataTable({
    "footerCallback": function(row, data, start, end, display) {
      var api = this.api(),
        data;

var portfolioSums = {};

api.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
    var data = this.data();
    
    key = data[1] + ' ' + data[2];
    if ( ! portfolioSums.hasOwnProperty( key ) ) {
    	portfolioSums[key] = 0;
    }
    
    portfolioSums[key] += data[3] * 1;
} );

console.log(portfolioSums)


      // Remove the formatting to get integer data for summation
      var intVal = function(i) {
        return typeof i === 'string' ?
          i.replace(/[\$,]/g, '') * 1 :
          typeof i === 'number' ?
          i : 0;
      };

      // Total over all pages
      total = api
        .column(3)
        .data()
        .reduce(function(a, b) {
          return intVal(a) + intVal(b);
        }, 0);

      // Total over this page
      pageTotal = api
        .column(3, {
          page: 'current'
        })
        .data()
        .reduce(function(a, b) {
          return intVal(a) + intVal(b);
        }, 0);

      // Update footer
      $(api.column(3).footer()).html(
        pageTotal + ' ( ' + total + ' )'
      );
    }
  });
});