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/scroller/1.4.2/js/dataTables.scroller.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/scroller/1.4.2/css/scroller.dataTables.min.css">
                <table id="example" cellpadding="0" cellspacing="0" border="0" class="table table-striped">
                    <thead>
                        <tr>
                            <th>RFCs</th>
                            <th>Project</th>
                            <th>RFC status</th>
                            <th>Description</th>
                            <th>Bussiness aplication</th>
                            <th>Test manager</th>
                            <th>Remedy</th>
                            <th>Client</th>
                            <th>Test status</th>
                            <th>VºBº status</th>
                    ...

JavaScript

'use strict';

            var oTable = $('#example').DataTable({
                deferRender:    true,
           			scrollY:        200,
        				scrollCollapse: true,
        				scroller:       true,
                colReorder: true,
                language : {
                    "url": "http://cdn.datatables.net/plug-ins/1.10.12/i18n/Spanish.json"
                },              
            });
            yadcf.init(oTable, [
            {
                column_number: 0,
                    filter_type: "multi_select",
                    select_type: 'select2',
                }, {
                    column_number: 1,
                    filter_type: "multi_select",
                    select_type: 'select2',
                    column_data_type: "html",
                    html_data_type: "text",
                }, {
                    column_number: 2,
                    filter_type: "multi_select",
                    select_type: 'select2',
                    column_data_type: "html",
                    html_data_type: "text",
                }, {
                    column_number: 10,
                    filter_type: "range_date",
                    date_format: "dd/mm/yyyy",
                    filter_delay: 500
            }]);