JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Birthday</th>
                <th>Salary</th>
            </tr>
        </thead>
    <tfoot>
        <tr>
                <th>Name</th>
                 <th>Birthday</th>
                <th>Salary</th>
            </tr>
    </tfoot>
        <tbody>
        </tbody>
 </table>

CSS

<s

JavaScript

$(document).ready(function() {
    // Populate data
    var tbody = $("tbody");
    for(var i=0; i<10000 ;i++){
        var salary = Math.random();
        var name = salary.toString(36).substring(7);
        var birthday = randomDate(new Date(2050, 0, 1), new Date())
        tbody.append("<tr><td>"+name+"</td><td>"+birthday.toUTCString()+"</td><td>"+salary+"</td></tr>");
    }
    
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $('#example thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
    
    var table = $('#example').DataTable();
    
     // Apply the filter
    table.columns().eq( 0 ).each( function ( colIdx ) {
        $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
            table
                .column( colIdx )
                .search( this.value )
                .draw();
        } );
    } );
});

function randomDate(start, end) {
    return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}