JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/dt-1.10.20/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/dt-1.10.20/datatables.min.js"></script>
<div class="container">


<div class="row">
    <table id="CellPhonesTable" class="table table-responsive table-striped table-bordered dt-responsive nowraps" style="width:100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
            </tr>
        </thead>
    </table>
</div>
</div>

JavaScript

var table
    $(document).ready(function () {
        table = $('#CellPhonesTable').DataTable({
        /*
            "ajax": {
                "url": "/PhoneBook/ReproduceJson",
                "data": function (d) {
                    //d.sample = $("#sample").val()
                },
                dataSrc: ""
            },
            */
            data: [
            	{ id: '1', pn: 'test data 1'},
              { id: '2', pn: 'test data 2'},
            ],
            "columns": [
                { "data": "id" },
                { "data": "pn" }
            ],
            "iDisplayLength": 25,
            "order": [],
            scrollX : true
        });

        $('#CellPhonesTable thead tr').clone().appendTo('#CellPhonesTable thead');

        $('#CellPhonesTable thead tr:eq(1) th:lt(24)').each(function (i) {
            $(this).removeClass("sorting sorting_desc");
            $(this).html('<input type="text" class="form-control form-control-sm" style="width:100%"/>');

            $('input', this).on('keyup change', function () {
                if (table.column(i).search() !== this.value) {
                    table
                        .column(i)
                        .search(this.value)
                        .draw();
                }
            });
        });
    });