JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://yadcf-showcase.appspot.com/resources/js/jquery.dataTables.10.min.js"></script>
<script src="http://yadcf-showcase.appspot.com/resources/js/jquery.dataTables.yadcf.js"></script>
<link rel="stylesheet" href="http://yadcf-showcase.appspot.com/resources/css/jquery.dataTables.10.min.css">
<link rel="stylesheet" href="http://yadcf-showcase.appspot.com/resources/css/jquery.dataTables.yadcf.css">
<div id="table_1">
			  <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
				<thead>
				  <tr>
                      <th><span id="first"></span>Some Data</th>
					<th><span id="second"></span>Numbers</th>
				</tr>
				</thead>
				<tbody>
				  <tr class="odd gradeX">
					<td>Some Data 1</td>
					<td>1000</td>
    			  </tr>
				  				</tbody>
			  </table>
			</div>

CSS

.yadcf-filter-wrapper {
    display: block;
}

JavaScript

$(document).ready(function () {
    'use strict';
 
    var oTable;
     
    oTable = $('#example').DataTable({
        stateSave: true
    });
     
    //----------------------------------------------
    //notice the new yadcf API for init the filters:
    //----------------------------------------------
     
    yadcf.init(oTable, [{
        column_number: 0,
        filter_container_id: 'first'
    }, {
        column_number: 1,
        filter_type: "select",
        filter_container_id: 'second'
    }]);
      
});