JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.18/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.18/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/datatables.min.js"></script>

 </head>
  <body>
<div class="card card-primary">
  <h4 class="card-header">Daily Running Hours</h4>
    <div class="card-body">
        <div class="row">
            <div class="col-md-4">
		        <div class="input-group input-daterange">
			<input type="text" class="form-control date-range-filter" value="" placeholder="Date Start" data-date-format="mm-dd-yyyy" id="min-date" />
            <div class="input-group-addon calender"><i class="fas fa-calendar-alt"></i></div>
			<input type="text" class="form-control date-range-filter" value="" placeholder="Date End" data-date-format="mm-dd-yyyy" id="max-date"/>
        </div>
	        </div>
        </div>
        <br>
      <table id="dtcuidadhrs" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
        <thead>
          <tr>
            <th>Date</th>
            <th>BC-100a Daily</th>
            <th>BC-100b Daily</th>
            <th>BC-100c Daily</th>
            <th>BC-100d Daily</th>
            <th>BC-100e Daily</th>
          </tr>
        </thead>
        <tbody>
                  <tr>
            <td>2018-10-18</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
          </tr>
                  <tr>
            <td>2018-10-19</td>
            <td>20</td>
            <td>20</td>
            <td>20</td>
            <td>20</td>
            <td>20</td>
          </tr>
    ...

JavaScript

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

		for (var i = 0; i < api.columns().count(); i++) {
			// total column
			var columnDataTotal = api
				.column(i)
				.data();
			var theColumnTotal = columnDataTotal
				.reduce(function(a, b) {
					if (isNaN(a)) {
						return '';
					} else {
						a = parseFloat(a);
					}
					if (isNaN(b)) {
						return '';
					} else {
						b = parseFloat(b);
					}
					return a + b;
				}, 0);
			// view page column
			var columnData = api
				.column(i, {
					page: 'current'
				})
				.data();
			var theColumnPage = columnData
				.reduce(function(a, b) {
					if (isNaN(a)) {
						return '';
					} else {
						a = parseFloat(a);
					}
					if (isNaN(b)) {
						return '';
					} else {
						b = parseFloat(b);
					}
					return a + b;
				}, 0);

			// Update footer
			$(api.column(0).footer()).html('Avarage');
			$(api.column(i).footer()).html(
				parseFloat(theColumnPage / columnData.count()).toFixed(2) + ' (' + parseFloat(theColumnTotal / columnDataTotal.count()).toFixed(2) + ' Total)'
			);
		}
	}
});