JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.9,r-1.0.7/datatables.min.css">
<script src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.9,r-1.0.7/datatables.min.js"></script>
<div class="container">
    <div id="wait"class="text-center">
        <h1>Loading in progress, please wait, ...</h1>
    </div>
    <div id="table-div-wait" class="hidden">
        <table id="table-test" class="table-recap table table-striped table-bordered table-hover dt-responsive nowrap" width="100%">
            <thead>
                <tr>
                    <th>Col1</th><th>Col2</th><th>Col3</th><th>Col4</th><th>Col5</th><th>Col6</th><th>Col7</th><th>Col8</th><th>Col9</th><th>Col10</th>
                </tr>
            </thead>

            <tbody>
                <tr><td>Val 1</td><td>Val 2</td><td>Val 3</td><td>Val 4</td><td>Val 5</td><td>Val 6</td><td>Val 7</td><td>Val 8</td><td>Val 9</td><td>Val 10</td></tr>
            </tbody>

            <tfoot>
                <tr>
                    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

CSS

tfoot tr td input {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

JavaScript

$(document).ready(function() {

    $('#table-test tfoot tr td').each( function () {
        var title = $('#table-test thead th').eq( $(this).index() ).text();
        if ((title != 'Col1') && (title != 'Col9') && (title != 'Col10') && (title != 'Actions') && (title != 'DĂ©tails')) {
            $(this).html( '<input type="text" placeholder="'+title+'..." />' );
        }
    } );

    var oTable = $('.table-recap').DataTable( {
        "responsive": true,
        "processing": true,
        "autoWidth": true,
        "initComplete": function(settings, json) {
            $('#wait').addClass("hidden");
            $('#table-div-wait').removeClass("hidden");
        },
        "columnDefs": [
            {"targets": 0, "orderable": false, "searchable": false},
            {"targets": -2, "orderable": false, "searchable": false},
            {"targets": -1, "orderable": false, "searchable": false}
        ],
        "order": [
            [2, "asc"]
        ],
        "lengthMenu": [
            [10, 25, 50, -1],
            [10, 25, 50, "All"]
        ],
        "pagingType": "full_numbers",
        "dom": "<'row'<'col-sm-6'l><'col-sm-6'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-5'i><'col-sm-7'p>>"
    } );
});