JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://yadcf-showcase.appspot.com/resources/css/jquery.dataTables.10.min.css">
<link rel="stylesheet" href="https://yadcf-showcase.appspot.com/resources/css/dataTables.jqueryui.css">
<link rel="stylesheet" href="https://yadcf-showcase.appspot.com/resources/css/jquery-ui.1.9.0.css">
<link rel="stylesheet" href="https://yadcf-showcase.appspot.com/resources/css/select2.css">
<link rel="stylesheet" href="https://yadcf-showcase.appspot.com/resources/css/jquery.dataTables.yadcf.css">
<link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.3.2/css/colReorder.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://yadcf-showcase.appspot.com/resources/js/select2.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
<script src="https://cdn.datatables.net/colreorder/1.3.2/js/dataTables.colReorder.min.js"></script>
<script src="https://yadcf-showcase.appspot.com/resources/js/jquery.dataTables.yadcf.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">
<script src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js"></script>
<nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul...

JavaScript

'use strict';

		var oTable = $('#example').DataTable({
      fixedHeader: true,
			columnDefs: [{
				targets: 0,
				render: function(data, type, full, meta) {
					if (type === 'filter') {
						return full[0].search('asgn') >= 1 ? "assigned" : full[0].search('notasg') >= 1 ? "notassigned" : data
					} else {
						return data
					}
				}
			}],
		});

		yadcf.init(oTable, [{
			column_number: 0,
			filter_match_mode: 'exact',
			data: [{
				value: 'assigned',
				label: 'Assigned'
			}, {
				value: 'notassigned',
				label: 'Not assigned'
			}]
		}]);

		$('.assigned').on('click', function() {
			yadcf.exFilterColumn(oTable, [
				[0, 'assigned']
			]);
		});