JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<table id="table1">
  <thead>
    <tr>
      <th>Fruit</th>
      <th>sumCondition</th>
      <th># Eaten</th>
      <th># Remaining</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th></th>
      <th align="center">Count</th>
      <th align="left"></th>
      <th align="left"></th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Apples</td>
      <td>IN</td>
      <td>3</td>
      <td>8</td>
    </tr>
    <tr>
      <td>Oranges</td>
      <td>VALID</td>
      <td>3</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Bananas</td>
      <td>IN</td>
      <td>2</td>
      <td>9</td>
    </tr>
       <tr>
      <td>Oranges</td>
      <td>VALID</td>
      <td>3</td>
      <td>5</td>
    </tr>
  </tbody>
</table>

JavaScript

$("#table1").DataTable({
  "paging": false,
  "searching": false,
  "info": false,    
	"footerCallback": function ( row, data, start, end, display ) {
  		
      var columns = [2, 3];
      //console.log(data);
      var api = this.api();
      console.log(display)
      console.log(data)
      // Get sumCondition and put in array     
      
      
      
      _.each(columns, function(idx) {
					var count = 0;
          var total = api
              .column(idx)
              .data()
              .reduce(function (a, b) {
               		// Find index of current value for accessing sumCondition value in same row
              		//var cur_index = api.column(idx).data().indexOf(b);
                  
                  var cur_index = display[count]; // Get display order index
                  var condition = data[cur_index][1];  // Get sumCondition value
                  count++;
                  console.log(idx, cur_index, data[cur_index][0], condition, b)
              		if (condition == "VALID") {
                    return parseInt(a) + parseInt(b);
                  }
                  else { return parseInt(a); }
              }, 0)       	

				$('tr:eq(0) th:eq('+idx+')', api.table().footer()).html(total);
      })
      
  }
});