JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Ignite UI Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2016.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2016.2/latest/css/structure/infragistics.css" rel="stylesheet" />

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://igniteui.com/js/external/FileSaver.js"></script>
<script src="http://igniteui.com/js/external/Blob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/modules/infragistics.documents.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/modules/infragistics.excel.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/modules/infragistics.gridexcelexporter.js"></script>
<script src="http://igniteui.com/js-data/employee-data-allDatatypes"></script>


        <input type="button" id="exportButton"></input><br />
        <table id="grid1"></table>

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 = [];
  					var i;
            for(i = 0;i < 1000;i++) {
              employees.push({
                "EmployeeID": "56250fa624c71485db41cf01" + i,
                "FirstName": "Hannah" + i,
                "LastName": "Crosby" + i,
                "Country": "USA" + i,
                "Age": 34,
                "RegistererDate": "06/02/2015",
                "IsActive": false
              });
						}
            $("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:...