JSFiddle - React, Tailwind, and code Playground

by JoseDM

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"/>
  <title>JS Bin</title>
</head>
<body>
  <form class="form-inline">
              <div class="col-12">
                <div class="input-group input-daterange">
                  <input type="text" id="min-date" class="form-control date-range-filter" data-date-format="yyyy-mm-dd" placeholder="from:">
                  <button type="button" class="ml-2 mr-2 btn btn-success"><i class="ml-2 mr-2 fas fa-arrow-right"></i></button>
                  <input type="text" id="max-date" class="form-control date-range-filter" data-date-format="yyyy-mm-dd" placeholder="to:">
                </div>
              </div>
          </form>
<table id="servicios" class="display" style="width:100%">
        <thead>
          <tr>
              <th style="background: #fff;text-align: center;border: none;" colspan="3"></th>
                <th colspan="1">
                     <h5 style="font-size: 13px;" >S/ <span id="soles"></span></h5>
                     <h5 style="font-size: 13px;" >$  <span id="dollar"></span></h5>
                 </th>
            </tr>
            <tr>
                <th>Name</th>
                <th>State</th>
                <th>Date</th>
                <th>salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>&#10003;</td>
                <td>2011-04-25</td>
                <td>$ 14.00</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>&#10003;</td>
                <td>2011-07-25</td>
              ...

JavaScript

$('.input-daterange input').datepicker();
$(document).ready(function(){
    var table = $('#servicios').DataTable({
      processing: true,
      serverSider: true,
      "pageLength": 50,
      "lengthMenu": [[5,10,50,-1], [5,10,50,"All"]],
      "language":{
        "url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"
      }
    });
    let  soles = 0.0;
    let  dollar = 0.0;
     table.column(3).data().each( value => {const [symbol, amount] = value.split(' ');
        if (symbol === "S/") {
            soles += parseFloat(amount.replace(/,/g, ""));$("#soles").text((+soles).toLocaleString('en-US'));
        } else if (symbol === "$") {
            dollar += parseFloat(amount.replace(/,/g, ""));$("#dollar").text((+dollar).toLocaleString('en-US'));
        };
    });
     $('.filter-input').keyup(function(){
        table.column($(this).data('column')).search($(this).val()).draw(); 
          let  soles_two = 0.0;
          let  dollar_two = 0.0;
        table.column(3,{search:'applied'}).data().each( value => {const [symbol_two, amount_two] = value.split(' ');
            if (symbol_two === "S/") {
                soles_two += parseFloat(amount_two.replace(/,/g, ""));
            } else if (symbol_two === "$") {
                dollar_two += parseFloat(amount_two.replace(/,/g, ""));
            };
            $("#soles").text((+soles_two).toLocaleString('en-US'));
            $("#dollar").text((+dollar_two).toLocaleString('en-US'));
        });
      }); 
    $.fn.dataTable.ext.search.push(
        function(settings, data, dataIndex) {
          var min = $('#min-date').datepicker("getDate");
          var max = $('#max-date').datepicker("getDate");
          var startDate = new Date(data[4]);

          if (min == null && max == null) { return true; }
          if (min == null && startDate <= max) { return true; }
          if (max == null && startDate >= min) { return true; }
          if (startDate == max && startDate >= min) { return true; }
  ...