JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.js"></script>
<table id=myTable>
    <thead><tr><th>Column 0</th><th>Column 1</th></tr></thead>
    <tbody>
        <tr><td>Some Data</td>
            <td>
                <select>
                    <option value='x'>x</option>
                    <option value='y'>y</option>
                    <option value='z'>z</option>
                </select></td>
        </tr>
        <tr><td>Some More Data</td>
            <td>
                <select>
                    <option value='x'>x</option>
                    <option value='y'>y</option>
                    <option value='z' selected>z</option>
                </select></td>
        </tr>
    </tbody>
</table>

JavaScript

$('select').click(function() { $('#myTable').dataTable().fnDraw(); });

$.fn.dataTableExt.afnFiltering.push(
    function( oSettings, aData, iDataIndex ) {
        var oTable = $('#myTable').dataTable();
        var nodes = $(oTable.fnGetNodes(iDataIndex));
        var selItem = nodes.find('select').val();
        
        // This is basic.  You should split the string and look
        // for each individual substring
        var filterValue = $('div.dataTables_filter input').val();
        
        return (selItem.indexOf(filterValue) !== -1);
    }
);
 
$('#myTable').dataTable(
    {
    });