JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css">
<script src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js"></script>
<select id="range">
  <option value="0-20">0-20</option>
  <option value="21-40">21-40</option>
  <option value="41-60">41-60</option>
  <option value="61+">61+</option>
</select>
<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2015-10-01</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2015-10-03</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2015-10-03</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2015-10-05</td>
      <td>$433,060</td>
    </tr>
   ...

JavaScript

//Start of the data table	
$(document).ready(function() {
  var table = $('#example').DataTable({
    "dom": '<"toolbar">frtip'
  });

  var dateRangeStart, dateRangeEnd;

  $("div.toolbar").html('<input id="date_range" type="text">');
  //END of the data table

  // Date range script - Start of the sscript
  $("#date_range").daterangepicker({
    autoUpdateInput: false,
    locale: {
      "cancelLabel": "Clear",
    }
  });

  $("#date_range").on('apply.daterangepicker', function(ev, picker) {
    dateRangeStart = picker.startDate;
    dateRangeEnd = picker.endDate;
    $(this).val(dateRangeStart.format('YYYY-MM-DD') + ' to ' + dateRangeEnd.format('YYYY-MM-DD'));
    table.draw();
  });

  $("#date_range").on('cancel.daterangepicker', function(ev, picker) {
    dateRangeStart = dateRangeEnd = null;
    $(this).val('');
    table.draw();
  });

  $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {

    var fromAge, toAge, inEmpAgeRange, inEmpStartingDateRange;

    var empAge = parseInt(data[3]);
    var empStartDate = Date.parse(data[4]);

    if ($('#range').val().indexOf("+") >= 0) {
      fromAge = parseInt($('#range').val().slice(0, -1));
      toAge = null;
    } else if ($('#range').val().indexOf("-") >= 0) {
      var ageRange = $('#range').val().split("-");
      fromAge = parseInt(ageRange[0]);
      toAge = parseInt(ageRange[1]);
    }
    
    inEmpAgeRange = (empAge >= fromAge || empAge) 
    							&& toAge !== null ? (empAge <= (toAge || empAge)) : true;

		inEmpStartingDateRange = (dateRangeStart && dateRangeEnd) ?
    	(moment(empStartDate).isSameOrAfter(dateRangeStart) 
      && moment(empStartDate).isSameOrBefore(dateRangeEnd)) : true;
    	
    return inEmpAgeRange && inEmpStartingDateRange;
  });

  $('#range').on('change', table.draw);
  $('#range').change(); // trigger filter
  //End of the datable
});