JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://nightly.datatables.net/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<div style="display: table-cell;padding: 15px 0 0;float:right;width:50%;" id="costBreakdown">
    </div>

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
 
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>30</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
       ...

CSS

.costBreakdownTable {
            background-color:#f9f9f9;
            float:right;
            border:1px solid grey;
            border-collapse:collapse;
        }
        .costBreakdownTable td {
            text-align:right;
        }   
        .costBreakdownTable tr th:nth-child(odd),td:nth-child(odd){
            background-color:white;
            border-left:0.9px solid #ddd;
        }
        .costBreakdownTable tr th:nth-child(even),td:nth-child(even){
            background-color:#f9f9f9;
            border-left:0.9px solid #ddd;
        }
        .costBreakdownTable tr th:first-child,td:first-child{
            border-left:none;
        }

JavaScript

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

                          // Remove the formatting to get integer data for summation
                          var intVal = function ( i ) {
                              return typeof i === 'string' ?
                                  i*1 :
                                  typeof i === 'number' ?
                                      i : 0;
                          };

                          var type1String = '';
                          var type1Rows = api.rows().eq( 0 ).filter( function (rowIdx) {
                          		//console.log( api.cell( rowIdx, 3 ).data());
                              type1String += api.cell( rowIdx, 3 ).data() === '61' ? ','+rowIdx : '';
                              return api.cell( rowIdx, 3 ).data() === '61' ? true : false;
                          } );
                          var type2String = '';
                          var type2Rows = api.rows().eq( 0 ).filter( function (rowIdx) {
                          	type2String += api.cell( rowIdx, 3 ).data() === '30' ? ','+rowIdx : '';
                              return api.cell( rowIdx, 3 ).data() === '30' ? true : false;     
        									} );
                          var searchRowString = '';
                          var searchRows = api.rows({search:'applied'}).eq( 0 ).filter( function (rowIdx) {
                          	searchRowString += ','+rowIdx ;
                              return true;     
        									} );           
															
                          var searchTotal = api.cells( null,3,{ search: 'applied'} ).render( 'display' ).reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );  
                          var type1Search = api.cells( type1Rows, 3,{search: 'applied'}...