JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<div class="container-fluid">
    <div class="col-sm-12">
        <div class="card">
            <table border="0" cellpadding="5">
                <tbody>
                    <tr>
                        <td>Minimum age:</td>
                        <td>
                            <input type="text" id="min" name="min">
                        </td>
                        <td>Maximum age:</td>
                        <td>
                            <input type="text" id="max" name="max">
                        </td>
                    </tr>
                </tbody>
            </table>

            <div class="table-responsive">
                <div>
                    <table id="example" class="display" style="width:100%">
                        <thead>
                            <tr>
                                <th>col 1</th>
                                <th>col 2</th>
                                <th>col 3</th>
                                <th>AGE</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>data 11</td>
                                <td>data 12</td>
                                <td>data 13</td>
                                <td>24</td>
                            </tr>
                            <tr>
                                <td>data 21</td>
                                <td>data 22</td>
                                <td>data 23</td>
                                <td>52</td>
                            </tr>
                            <tr>
                                <td>data 31</td>
            ...

JavaScript

/* Custom filtering function which will search data in column four between two values */
$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
    alert("hello");
        var min = parseInt( $('#min').val(), 10 );
        var max = parseInt( $('#max').val(), 10 );
        var age = parseFloat( data[3] ) || 0; // use data for the age column
 
        if ( ( isNaN( min ) && isNaN( max ) ) ||
             ( isNaN( min ) && age <= max ) ||
             ( min <= age   && isNaN( max ) ) ||
             ( min <= age   && age <= max ) )
        {
            return true;
        }
        return false;
    }
);
 
$(document).ready(function() {
    var table = $('#example').DataTable();
     
    // Event listener to the two range filtering inputs to redraw on input
    $('#min, #max').keyup( function() {
        table.draw();
    } );
} );