JSFiddle - React, Tailwind, and code Playground

HTML

<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-html5-1.5.4/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<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-html5-1.5.4/datatables.min.js"></script>

  </head>
<body>
  <main>
    <div class="container-fluid">
<div class="container-fluid">
  <hr>
    <div class="page-header">
          <h4 class="tableheader">Compressors - Cuidad Pemex <a href="http://localhost/bmxserver/" class="btn btn-sm btn-primary float-right"><svg class="svg-inline--fa fa-home fa-w-18" aria-hidden="true" data-prefix="fas" data-icon="home" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M488 312.7V456c0 13.3-10.7 24-24 24H348c-6.6 0-12-5.4-12-12V356c0-6.6-5.4-12-12-12h-72c-6.6 0-12 5.4-12 12v112c0 6.6-5.4 12-12 12H112c-13.3 0-24-10.7-24-24V312.7c0-3.6 1.6-7 4.4-9.3l188-154.8c4.4-3.6 10.8-3.6 15.3 0l188 154.8c2.7 2.3 4.3 5.7 4.3 9.3zm83.6-60.9L488 182.9V44.4c0-6.6-5.4-12-12-12h-56c-6.6 0-12 5.4-12 12V117l-89.5-73.7c-17.7-14.6-43.3-14.6-61 0L4.4 251.8c-5.1 4.2-5.8 11.8-1.6 16.9l25.5 31c4.2 5.1 11.8 5.8 16.9 1.6l235.2-193.7c4.4-3.6 10.8-3.6 15.3 0l235.2 193.7c5.1 4.2 12.7 3.5 16.9-1.6l25.5-31c4.2-5.2 3.4-12.7-1.7-16.9z"></path></svg><!-- <i class="fas fa-home"></i> --></a></h4>
    </div>
    <hr>
  <div class="row"><div class="col-sm-12"><table id="dtcuidadhrs" class="table table-striped table-bordered dt-responsive nowrap dataTable dtr-inline" cellspacing="0" width="100%" role="grid"...

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++) {

			var columnData = api
				.column(i)
				.data();
			var theColumnTotal = columnData
				.reduce(function(a, b) {
					if (isNaN(a)) {
						return '';
					} else {
						a = parseFloat(a);
					}
					if (isNaN(b)) {
						return '';
					} else {
						b = parseFloat(b);
					}
					return (a + b).toFixed(2);
				}, 0);

            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).toFixed(2);
   				}, 0);

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