JSFiddle - React, Tailwind, and code Playground

by georgianastasov

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://igniteui.com/js/external/FileSaver.js"></script>
<script src="https://igniteui.com/js/external/Blob.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://cdn-na.infragistics.com/igniteui/latest/js/infragistics.excel-bundled.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/modules/infragistics.gridexcelexporter.js"></script>
<script src="https://igniteui.com/js-data/employee-data-allDatatypes"></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>

<div class="group-fields">
            <div class="item">
                <div id="sorting" class="optionContainer"></div>
                <label class="item-label" for="sorting">Sorting</label>
            </div>
            <div class="item">
                <div id="summaries" class="optionContainer"></div>
                <label class="item-label" for="summaries">Summaries</label>
            </div>
            <div class="item">
                <div id="colfixing" class="optionContainer"></div>
                <label class="item-label" for="colfixing">Column Fixing</label>
            </div>
            <div class="item">
                <div id="styling" class="optionContainer"></div>
                <label class="item-label" for="styling">Grid Styling</label>
            </div>
        </div>
        <div class="optionContainer">
            Filtering<br />
            <select...

CSS

#exportButton {
                margin-bottom: 8px;
            }
            .optionContainer{
				display: inline-block;
			}
			.item {
				display: inline-block;
				height: 30px;
			}
			.item ~ .item {
				margin-left: 15px;
			}
			.item-label {
				display: block;
				float: right;
				margin-left: 5px;
                line-height: 21px;
			}
            .exporting-overlay {
                position: absolute;
                background-color: rgba(181, 181, 181, 0.9);
                top: 0;
                left: 0;
                z-index: 100000;
                text-align: center;
                vertical-align: top;
                padding-top: 100px;
            }
            .exporting-overlay:after {
                content: "";
                display: inline-block;
                vertical-align: middle;
                height: 100%;
            }
            .exporting-text {
                font-size: 46px;
                font-weight: bold;
                vertical-align: top;
            }

JavaScript

$(function () {
            var keys = ["EmployeeID", "FirstName", "LastName", "RegistererDate", "Country", "Age", "IsActive", "Company"],
                columnsToSkip = [];

            $("div.optionContainer:lt(4)").igCheckboxEditor();
            $("select").igCombo({ width: "150px", mode: "dropdown"});
            $("#colstoskip").igCombo({
                width: "150px",
                mode: "dropdown",
                dataSource: keys,
                multiSelection: {
                    enabled: true,
                    showCheckboxes: true
                }
            });
            $("fieldset").show();
            $("#grid1").igGrid({
                autoGenerateColumns: false,
                width: "100%",
                primaryKey: "EmployeeID",
                autofitLastColumn: true,
                columns: [
                    { headerText: "Employee ID", key: "EmployeeID", dataType: "string", hidden: true },
                    { headerText: "Last Name", key: "LastName", width: "15%", dataType: "string" },
                    { headerText: "Country", key: "Country", width: "15%", dataType: "string" },
                    { headerText: "Age", key: "Age", width: "15%", dataType: "number" },
                    { headerText: "Is Active", key: "IsActive", width: "15%", dataType: "bool", format: "checkbox" },
                    { headerText: "Company", key: "Company", width: "20%", dataType: "string", unbound: true, formula: function () { return "http://infragistics.com/"; } },
                    { headerText: "Register Date", key: "RegistererDate", width: "20%", dataType: "date" }
                ],
                dataSource: employees,
                primaryKey: "EmployeeID",
                features: [
                    {
                        name: "Sorting",
                        mode: "multi",
                    },
                    {
                        name: "Paging",
                        type: "local",
           ...