JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudfla
  re.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.19/sorting/date-eu.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<div class="container">
  <div class="col-md-4 pull-right">
    <div class="input-group input-daterange">

      <input type="text" id="min-date" class="form-control date-range-filter" data-date-format="dd-mm-yyyy" placeholder="From:">

      <div class="input-group-addon">to</div>

      <input type="text" id="max-date" class="form-control date-range-filter" data-date-format="dd-mm-yyyy" placeholder="To:">

    </div>
  </div>
</div>
<input type="button" id="btn-do-total" value="Total" />
<hr>
<p id="totalCash"></p>
<p id="totalCard"></p>
<hr>
<table id="records" class="table table-striped table-bordered" style="width:100%">
  <thead>
    <tr>
      <th>date</th>
      <th>Num</th>
      <th>Price</th>
      <th>Status</th>
      <th>Type</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>date</th>
      <th>Num</th>
      <th>Price</th>
      <th>Status</th>
      <th>Type</th>
    </tr>
  </tfoot>
  <tbody>
    <tr role="row" class="odd">
      <td class="sorting_1">27-03-2019</td>
      <td>521735</td>
      <td>£5.20</td>
      <td>overdue</td>
      <td>Card</td>
    </tr>
    <tr role="row" class="even">
      <td class="sorting_1">27-03-2019</td>
      <td>513938</td>
      <td>£1.20</td>
      <td>overdue</td>
      <td>Cash</td>
    </tr>
    <tr role="row" class="odd">
    ...

JavaScript

$(document).ready(function() {

  $('.input-daterange input').each(function() {
    $(this).datepicker('clearDates');
  });

  var dt = $('#records').DataTable({

    "footerCallback": function(row) {
			computeTotals(this.api());
    },
    "order": [
      [0, "desc"]
    ],
    "columns": [{
        data: 'datePaid'
      },
      {
        data: 'invoice'
      },
      {
        data: 'amount'
      },
      {
        data: 'chargeType'
      },
      {
        data: 'paymentType'
      },
    ],
    "columnDefs": [{
      targets: [0],
      type: 'date-eu'
    }],

  });
 // Extend dataTables search
  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      var min = $('#min-date').val()? $('#min-date').val().split("-") : "";
      var max = $('#max-date').val()? $('#max-date').val().split("-") : "";

      var createdAt = data[0].split("-") || 0; // Our date column in the table
      
      createdAt = new Date(createdAt[1] + '/' + createdAt[0] + '/' + createdAt[2])
      min = min?new Date(min[1] + '/' + min[0] + '/' + min[2]): "";
      max = max?new Date(max[1] + '/' + max[0] + '/' + max[2]):"";
      if (
        (min==="" || max ==="") ||
        (moment(createdAt).isSameOrAfter(min) && moment(createdAt).isSameOrBefore(max))
      ) {
        return true;
      }
      return false;
    }
  );

  // Re-draw the table when the a date range filter changes
  $('.date-range-filter').change(function() {
   	dt.draw();
    computeTotals(dt);
  });

	// search event
  dt.on('search.dt', function () {
  	computeTotals(dt);
  });
	function computeTotals(api) {
			var data;

      let cashTotalValue = 0;
      let cardTotalValue = 0;
      
      let min = $('#min-date').val() ? $('#min-date').val().split("-") : "";
      let max = $('#max-date').val() ? $('#max-date').val().split("-") : "";
      min = min ? new Date(min[1] + '/' + min[0] + '/' + min[2]) : "";
      max = max ? new Date(max[1] + '/' + max[0] + '/' + max[2]) :...