JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.datatables.net/1.10.5/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/fixedheader/2.1.2/css/dataTables.fixedHeader.css">
<script src="//cdn.datatables.net/fixedheader/2.1.2/js/dataTables.fixedHeader.js"></script>
<table id="example" class="display" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>
                <input class='i1'></input>
            </th>
            <th>
                <select class='i2' type='select'>
                    <option></option>
                    <option>o1</option>
                    <option>o2</option>
                </select>
            </th>
        </tr>
        <tr>
            <th>Email</th>
            <th>Company</th>
        </tr>
    </thead>
    <tbody></tbody>
    <tfoot>
        <tr>
            <th>Email</th>
            <th>Company</th>
        </tr>
    </tfoot>
</table>
<button id='b1'>Test</button>

JavaScript

function stateLoadedCallback(settings,data) {
    $('.i1').val('o1');
    $('.i2').val('o1');
    
    console.log($('.i1').val());
    console.log($('.i2').val());
    
    console.log($('.i2').length);
}

$(document).ready(function () {
    //http://www.datatables.net/reference/api/
    var url = "http://beta.json-generator.com/api/json/get/C83zgTc";
    var columns = [
        {title:'Email',   data:'email',   name:'email'},
        {title:'Company', data:'company', name:'company'},
        ];

    var table = $('#example').DataTable({
        processing: true,
        serverSide: false,
        ajax: url,
        columns: columns,
        stateSave: true,
        stateLoaded: stateLoadedCallback
    });
    new $.fn.dataTable.FixedHeader(table);
        
    $('#b1').on('click',function(){
        console.log($('.i2').length);
        console.log($('.i2').val());
    });

});