JSFiddle - React, Tailwind, and code Playground

by dkamburov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/js/apiviewer.js"></script>
<script src="https://igniteui.com/js-data/northwind"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<link href="https://igniteui.com/css/apiviewer.css" rel="stylesheet" type="text/css"></link>

<table id="tblCheckInQueList">
    </table>

CSS

fieldset.explorer
        {
            float: left;
            width: 45%;
        }
        #sampleContainer fieldset input[type="checkbox"] + label
        {
            display: inline;
        }
        .addNewRow
        {
            width: 100%;
            list-style-type: none;
        }
        .addNewRow li
        {
            display: inline-block;
            float: left;
            margin-right: 1em;
            height: 60px;
        }
        .ui-igedit
        {
            margin: 2px 0px 2px 0px;
        }

JavaScript

$(function () {

            // Used to show output in the API Viewer at runtime,
            // defined in external script "apiviewer.js"
            var apiViewer = new $.ig.apiViewer();

            var titles = ["Sales Representative", "Sales Manager", "Inside Sales Coordinator", "Vice President, Sales"];
            var countries = ["UK", "USA"];

            /*----------------- Method & Option Examples -------------------------*/

            // process events of checkboxes
            $("#enableDelete").on({
                change: function (e) {
                    $("#grid").igGridUpdating("option", "enableDeleteRow", $(this).is(":checked"));
                }
            });

            $("#enableAddRow").on({
                change: function (e) {
                    $("#grid").igGridUpdating("option", "enableAddRow", $(this).is(":checked"));
                }
            });

            $("#showButtons").on({
                change: function (e) {
                    $("#grid").igGridUpdating("option", "showDoneCancelButtons", $(this).is(":checked"));
                }
            });

            // process events of select options
            $("#editMode").igCombo({
                mode: "dropdown",
                height: 23,
                enableClearButton: false,
                enableActiveItem: false,
                selectionChanged: function (evt, ui) {
                    if (ui.items.length == 1) {
                        var editMode = ui.items[0].data.value;
                        $("#grid").igGridUpdating("option", "editMode", editMode);
                    }
                }
            });

            $("#startEditTriggers").igCombo({
                mode: "dropdown",
                height: 23,
                enableClearButton: false,
                enableActiveItem: false,
                selectionChanged: function (evt, ui) {
                    if (ui.items.length == 1) {
                        var startEditTriggers =...