JSFiddle - React, Tailwind, and code Playground

by mgutbor

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>
<script src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js"></script>
    <div class="container-fluid mg-20">
        <div class="form-horizontal contInt">
            <div class="col-xs-12">
                <div class="col-xs-3 buttonsL">
                    <button class="btn btn-default btnL pull-left assigned">ASSIGNED</button>
                </div>
                <div class="col-xs-3 buttonsS"></div>
                <div class="col-xs-3 buttonsV">
                    <div class="col-xs-3 buttonsV2"></div>
                </div>
                <div class="col-xs-3 buttonsF"></div>
            </div>
<table id="example" cellpadding="0" cellspacing="0" border="0" class="table table-striped">
                    <thead>
                        <tr>
                            <th>Status</th>
                         ...

JavaScript

'use strict';

		var oTable = $('#example').DataTable({
			columnDefs: [{
				targets: 0,
				render: function(data, type, full, meta) {
					if (type === 'filter') {
						if(data.search('black') >= 1){
							return "black nas";
						}else if(data.search('green') >= 1){
							return "green asg";
						}else if(data.search('yellow') >= 1){
							return "yellow asg";
						}else if(data.search('red') >= 1){
							return "red asg";
						} else {
							return data;
						}
					} else {
						return data
					}
				}
			}],
		});

		yadcf.init(oTable, [{
			column_number: 0,
			filter_match_mode: 'exact',
			data: [{
				value: 'black',
				label: 'Black'
			},{
				value: 'green',
				label: 'Green'
			},{
				value: 'yellow',
				label: 'Yellow'
			},{
				value: 'red',
				label: 'Red'
			}]
		}]);

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