JSFiddle - React, Tailwind, and code Playground

by Cymo_

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="https://datatables.net/release-datatables/extensions/ColVis/js/dataTables.colVis.js"></script>
<script src="https://www.datatables.net/release-datatables/extensions/ColReorder/js/dataTables.colReorder.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.7/api/fnProcessingIndicator.js"></script>
<script src="https://cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.min.css">
<link rel="stylesheet" href="https://yadcf-showcase.appspot.com/resources/css/jquery.dataTables.yadcf.css">
<link rel="stylesheet" href="https://datatables.net/release-datatables/extensions/ColVis/css/dataTables.colVis.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
<link rel="stylesheet" href="https://datatables.net/release-datatables/media/css/jquery.dataTables.css">
<script src="https://rawgit.com/vedmack/yadcf/master/beta/jquery.dataTables.yadcf.js"></script>
<div class="row">
    <div class="col-lg-12">
        <section class="panel">
            <div class="panel-body">
               
                <div class="row">
                    <div>
                        <div><b>col 0 filter</b>

                        </div>
                        <div id="external_filter_container_0"></div>
                        <div><b>col 3...

JavaScript

$(document).ready(function () {


    var table_adwords_weekly;
    var table_adwords_weekly_api;

    // Creation of the DataTable instance on the Adwords stats table
    table_adwords_weekly = $('#table_adwords_stats_weekly')
        .DataTable({
        "processing": true, // Display the loading div when Datatable is processing a sort / reorder etc.
        "scrollX": true, // Allows the horizontal scroll when there are to many columns
        "stateSave": true, // Saves the state of the table in the localstorage
        "orderClasses": false, // Removes the classes on ordered columns, performance improvement
        "autoWidth": false, // Prevents the columns widths from being auto-calculated
        "dom": 'RC<"clear">lfrtip<"clear">', // Injection of the plugins into the DOM (order counts)
        "colVis": {
            "buttonText": "Show/hide columns" // TODO: Translate dynamically
        },
            "colReorder": {
            'reorderCallback': function () {
                if (table_adwords_weekly_api) {
                    table_adwords_weekly_api.fnProcessingIndicator(false); // Removes the processing div when the reorder is done
                }

            }
        },
        'iDisplayLength': 10 // Default length of the table
    });

    // Creation of the api instance of the table (watch the case : dataTable instead of DataTable)
    table_adwords_weekly_api = $('#table_adwords_stats_weekly').dataTable();
    
    table_adwords_weekly_api.yadcf([
                {
                    column_number: 0,
                    column_data_type: "html",
                    filter_type: "multi_select",
                    filter_default_label: "Select",
                    select_type: "chosen",
                    html_data_type: 'selector',
                    html_data_selector: '.main-data',
                    filter_container_id: "external_filter_container_0"
                }, {
                    column_number: 3,
                   ...