JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<table id="example" class="display responsive nowrap" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Extn.</th>
                <th>E-mail</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger</td>
                <td>Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>5421</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>Garrett</td>
                <td>Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
                <td>8422</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>Ashton</td>
                <td>Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
                <td>1562</td>
                <td>[email protected]</td>
            </tr>
          ...

JavaScript

var table = $('#example').DataTable({
        "sPaginationType": "numbers",
        "bProcessing": true,
        "bDeferRender": true,
        "serverSide": false,
        orderCellsTop: true,
        "responsive": true,
        "responsive": {
            "breakpoints": [
            { name: 'desktop', width: Infinity },
            { name: 'tablet', width: 1024 },
            { name: 'fablet', width: 768 },
            { name: 'phone', width: 480 }
            ]
        },
        //dom: 'rt<"bottom"lip><"clear">',
        //"sDom": '<<t>lip>',
        "sDom": "<'row'<'span8'><'span8'>r>t<'row'<'span8'l><'span4'ip>>",
        lengthMenu: [[10, 25, 50], [10, 25, 50]],
    });
    
        // Setup - add a text input to each cell in the filterRow
    $('#example thead tr#filterRow th').each(function () {
        $(this).html('<input type="text" placeholder="Filter..." style="width:100%;border:none;"/>');
    });

    // Apply the search
    table.columns().every(function () {
        var that = this;

        $('input', this.header()).on('change', function () {
            alert();
            if (that.search() !== this.value) {
                that
                    .search(this.value)
                    .draw();
            }
        });
    });