JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
    <script src="//cdn.datatables.net/buttons/1.3.1/js/buttons.colVis.min.js"></script>
    <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="60+">60+</option>
</select>
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Jon</td>
            <td>64</td>
        </tr>
        <tr>
            <td>Bill</td>
            <td>86</td>
        </tr>
        <tr>
            <td>Joel</td>
            <td>12</td>
        </tr>
        <tr>
            <td>Fred</td>
            <td>35</td>
        </tr>
    </tbody>
</table>

CSS

table {
    width: 100%;
    border: 1px solid #ccc;
    border-collapse: collapse;
}
table th, table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}
input {
    border: 1px solid #ccc;
    padding: 8px;
    margin-bottom: 20px;
}

JavaScript

$(document).ready(function () {
    var table = $('table').DataTable({
            fixedHeader:{
                header:true,
                footer:false
            },
            filter: true,
            ordering: true,
            processing: true,
            retrieve: true,
            paging:false,
            dom: 'Bfrtip',
            columnDefs: [
                {
                    targets: 1,
                    className: 'noVis'
                },{

                }
            ],
            buttons: [
                {
                    extend: 'colvis',
                    columns: ':not(.noVis)'
                }
            ]
        });
    $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
        if ($('#range').val().indexOf("+")>=0){
            var number=$('#range').val().slice(0,-1);
            //alert(number);
            return parseInt(data[1]) > parseInt(number || data[1]);
        }else if ($('#range').val().indexOf("-")>=0){
            var number=$('#range').val().split("-");
            //alert(number[0]);
            //alert(number[1]);
            return parseInt(data[1]) >= parseInt(number[0] || data[1])
                    && parseInt(data[1]) <= parseInt(number[1] || data[1]);
        }
    });
    $('#range').on('change',table.draw);
});