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>
    <table id="example" cellpadding="0" cellspacing="0" border="0" class="table table-striped">
                    <thead>
                        <tr>
                            <th>Status</th>
                            <th>Project</th>
                            <th>RFC status</th>
                        </tr>
                    </thead>
                    <tbody>
						<tr>
                        		<td>ON</td>
                            <td>PR00000001</td>
                            <td>Rejected</td>
                        </tr>
                        <tr>
                            <td>OFF</td>
                            <td>PR00000002</td>
                            <td>Acepted</td>
                        </tr>
                        <tr>
                            <td>off</td>
                            <td></td>
             ...

JavaScript

'use strict';

		var oTable = $('#example').DataTable();

		yadcf.init(oTable, [
			{
				column_number: 0,
				filter_type: 'multi_select',
        filter_match_mode: 'exact',
        select_type: 'select2',
        column_data_type: "text",
			},{
				column_number: 1,
				filter_type: 'text',
			}]);