JSFiddle - React, Tailwind, and code Playground

by Dominic Myers

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.7/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.7/semantic.css">
<script src="//cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<div class="ui segment">
    <h2>Employees</h2>
    <table id="tableA" class="ui celled table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</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>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration...

JavaScript

var position_options = [];
var office_options = [];
var tableA = $("#tableA").DataTable({
    "ordering":  false,
    "dom": '<"ui grid form"<"four wide column"l><"#status_select_holder"><"#type_select_holder"><"four wide column"f>>t<"ui grid"<"eight wide column"i><"right floated eight wide column"p>>',
    "language":{
        "lengthMenu": "Number of employees to show _MENU_",
        "zeroRecords": "No matching employees found",
        "infoEmpty": "Showing 0 to 0 of 0 employees",
        "info": "Showing _START_ to _END_ of _TOTAL_ employees",
        "infoFiltered": "(filtered from _MAX_ total employees)"
    },
    "columns": [
        { // Name
            "render":function(data){
                return "<a href='/employee?id="+data+"'>"+data+"</a>";
            }
        },{ // Position
            "render": function(data){
                if($.inArray(data, position_options) === -1){
                    position_options.push(data);
                }
                return data;
            }
        },{ // Office
            "render": function(data){
                if($.inArray(data, office_options) === -1){
                    office_options.push(data);
                }
                return data;
            }
        },
        null,// Age
        null, // Start Date
        null // Salery
    ],
    "pagingType": "numbers",
    "drawCallback": function() {
        var tableA_paginate = $("#tableA_paginate");
        var page_numbers = tableA_paginate.find("span").children().clone(true);
        tableA_paginate.empty().append(page_numbers);
        tableA_paginate.addClass("right floated ui pagination menu");
        tableA_paginate.children().each(function(k, v){
        	$(v).addClass("item");
            if($(v).hasClass("current")){
            	$(v).addClass("active");
            }
            if($(v).hasClass("ellipsis")){
            	$(v).addClass("disabled");
            }
        })
    },
    "initComplete": function(settings, json) {
...