JSFiddle - React, Tailwind, and code Playground

by tsathianathan

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap4.min.css">
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
        <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td></td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                </tr>
                <tr>
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$170,750</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>Junior Technical Author</td>
                    <td>San Francisco</td>
                    <td>66</td>
   ...

JavaScript

$(document).ready(function() {
    $('#example').DataTable({

        initComplete: function() {
            var columnsCustom = [1, 2, 3];
            var columnNames = ["Position", "Office", "Age"];
            for (var i = 0; i < columnsCustom.length; i++) {
                this.api().columns(columnsCustom[i]).every(function() {
                    var column = this;
                    var select = $('<label for="' + i + '" class="sr-only">' + columnNames[i] + '</label><select id="' + i + '"><option value=""></option></select>')
                        .appendTo($(column.footer()).empty())
                        .on('change', function() {
                            var val = $.fn.dataTable.util.escapeRegex($(this).val());

                            column.search(val ? '^' + val + '$' : '', true, false).draw();
                        });

                    column.data().unique().sort().each(function(d, j) {
                        $('#' + i).append('<option value="' + d + '">' + d + '</option>')
                    });
                });
            }
        },

		columnDefs : [
            {
                targets : [ 3],
                render : function ( data, type, row ) {
                    var value = '';
                    if ( data == '' ) { value = 'N/A' } else { value = data; }
                    return value;
                }
            },
        ],
    });
});