JSFiddle - React, Tailwind, and code Playground

by zlen

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3,b-flash-1.0.3/datatables.min.css">
<script src="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3,b-flash-1.0.3/datatables.min.js"></script>
<table id="example" class="display" width="100%">
    <tfoot>
        <tr></tr>
    </tfoot>
</table>

JavaScript

var dataSet = [
    [1,"Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"],
    [2,"Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000"],
    [10,"Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575"],
    [3,"Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650"],
    [5,"Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850"],
    [9,"Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000"],
    [12,"Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000"],
    [23,"Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050"],
    [99,"Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675"]
];

$(document).ready(function() {

    var columns = [
        {title: "ID"},
        {title: "Name"}, 
        {title: "Position"}, 
        {title: "Office"}, 
        {title: "Extn."}, 
        {title: "Start date"}, 
        {title: "Salary"}
    ];

    // Footer construction
    var $tfoot = $("#example tfoot tr");
    for (var i = 0, len = columns.length; i < len ; i++){
        $tfoot.append("<th>");
    }

    $('#example').DataTable( {
        data: dataSet,
        columns: columns,
        initComplete: function (setting, json) {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><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();
                });

               ...