JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.1/jquery.dataTables.yadcf.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.1/jquery.dataTables.yadcf.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<table cellpadding="1" cellspacing="1" id="docTable">
<thead>
<tr>
	<th>Head 1</th>
	<th>Head 2</th>
</tr>
</thead>
<tbody>
<tr>
	<td>Laith Bryan</td>
	<td>aliquet@eu.co.uk</td>
</tr>
<tr>
	<td>Paul Olsen</td>
	<td>eu.eros.Nam@nequetellus.edu</td>
</tr>
<tr>
	<td>Cameron Ramos</td>
	<td>Phasellus@auctor.net</td>
</tr>
<tr>
	<td>Slade Baker</td>
	<td>turpis@purussapiengravida.co.uk</td>
</tr>
<tr>
	<td>Caleb Schmidt</td>
	<td>diam.nunc@quisaccumsan.edu</td>
</tr>
<tr>
	<td>Chaney Woodward</td>
	<td>In@ipsum.com</td>
</tr>
<tr>
	<td>Otto Rosa</td>
	<td>Mauris.magna@Aeneaneget.co.uk</td>
</tr>
<tr>
	<td>Lyle Berg</td>
	<td>mollis@consectetueradipiscingelit.ca</td>
</tr>
<tr>
	<td>Victor Bullock</td>
	<td>justo@magnaa.edu</td>
</tr>
<tr>
	<td>Hop Webster</td>
	<td>ligula@Nuncquisarcu.com</td>
</tr>
<tr>
	<td>Laith Blevins</td>
	<td>interdum.enim.non@eratnonummy.co.uk</td>
</tr>
<tr>
	<td>Joshua Huffman</td>
	<td>Donec@Nunclaoreet.com</td>
</tr>
<tr>
	<td>Octavius Mccall</td>
	<td>nec.diam.Duis@odio.ca</td>
</tr>
<tr>
	<td>Hamilton Ingram</td>
	<td>semper.dui@tempus.net</td>
</tr>
<tr>
	<td>Judah Reese</td>
	<td>quis.turpis.vitae@NullafacilisisSuspendisse.ca</td>
</tr>
<tr>
	<td>Keegan Vaughan</td>
	<td>id@etmagnisdis.edu</td>
</tr>
<tr>
	<td>Kenneth...

JavaScript

var opts = [{value:0, label:"Some 1"},{value:1, label:"Some 2"}];
 var table = $("#docTable").DataTable({
            processing: true,
            serverSide: false,
            paging: true,
            ordering: true,
            deferRender: true,
            pageLength: 10,
            lengthMenu: [[10, 50, 100, -1], [10, 50, 100, "All"]],
            columns: [
               { "data": "Identifier", className: "nowrap" },
               { "data": "Name" },
            ]
 });

yadcf.init(table, [
  { column_number: 0, filter_type: "text", style_class: "form_control", filter_default_label: "" },
  {
   data: opts,
    column_number: 1, filter_type: "select", select_type: "select2", filter_default_label: "",
    select_type_options: {
     
      width: '180px',
      dropdownAutoWidth: true,
    }
  },
]);