JSFiddle - React, Tailwind, and code Playground

by Niranjan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.3/bootstrap-slider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.3/css/bootstrap-slider.min.css">
<div class="table-responsive">
<b>1 year</b> <input id="ageSelector" type="text" class="span2" value="" data-slider-min="1" data-slider-max="50" data-slider-step="5" data-slider-value="[2,49]"/> <b> 50 years</b>
<!--<input type="text" id="filterInput" placeholder="Filter equipment .." title="Filter">-->
    <br>
    <table id="betterTable" data-toggle="table" class="table table-striped table-bordered table-hover table-condensed">
        <thead>
            <tr>
                <th data-field="Equipment" data-sortable="true">Equipment ID</th>
                <th>Location</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
         <tr>
           <td>123</td>
           <td>CA</td>
           <td>12</td>
         </tr>
         <tr>
           <td>456</td>
           <td>CT</td>
           <td>30</td>
         </tr>
        </tbody>
    </table>
</div>

CSS

th {
  color: #33adff;
}
.table-responsive>.fixed-column {
    position: absolute;
    display: inline-block;
    width: auto;
    border-right: 1px solid #ddd;
}
@media(min-width:768px) {
    .table-responsive>.fixed-column {
        display: none;
    }
}

JavaScript

var age = $("#ageSelector").slider().on('slide',function() {
  var input, filter, table, tr, td, i;
  filter = age[0].value.split(',');
  table = document.getElementById("betterTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[2];
    if (td) {
      if (parseInt(td.innerHTML) >= parseInt(filter[0]) && parseInt(td.innerHTML) <= parseInt(filter[1])) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
});

/*$("#filterInput").keyup(function() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("filterInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("betterTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
});*/