JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://yadcf-showcase.appspot.com/resources/js/jquery.dataTables.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.css">
<link rel="stylesheet" href="http://yadcf-showcase.appspot.com/resources/css/jquery.dataTables.yadcf.css">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
        <tr>
            <th>Region</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>USA - Rocky Mountains Section</td>
        </tr>
        <tr>
            <td>USA - Gulf Coast Section</td>
        </tr>
        <tr>
            <td>Europe|Middle East</td>
        </tr>
    </tbody>
</table>

JavaScript

$(document).ready(function () {
    var oTable = $('#example').dataTable({
        "bJQueryUI": true
    }).yadcf([{
        column_number: 0,
        filter_match_mode : "exact",
        caseInsensitive: false
       
    }]);
});