JSFiddle - React, Tailwind, and code Playground

by dkamburov

HTML

<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.11.2/jquery-ui.min.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://igniteui.com/js-data/nw-customers"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>


<table id="grid1"></table>

JavaScript

$(function () {
function colorizeColumn(cellClass, color) {
			$("." + cellClass + "Cell").css("color", color);
		}
		$(function () {
			$("#grid1").igGrid({
				width: "100%",
				height: "500px",
				autoGenerateColumns: false,
				dataSource: nwCustomers,
				responseDataKey: "results",
				columns: [
					{
						headerText: "Company Information",
						group: [
							{
								headerText: "Company Name",
								key: "CompanyName",
								dataType: "string",
								width: "150px"
							},
							{
								headerText: "Contact Name",
								key: "ContactName",
								dataType: "string",
								width: "150px",
								groupOptions: {
									hidden: "parentcollapsed"
								}
							},
							{
								headerText: "Contact Title",
								key: "ContactTitle",
								dataType: "string",
								width: "200px",
								template: $( "#colTmpl" ).html(),
								groupOptions: {
									hidden: "parentcollapsed"
								}
							}
						],
						groupOptions: {
							expanded: true,
							allowGroupCollapsing: true
						}
					},
					{
						headerText: "Address Information",
						group: [
							{
								headerText: "Local Address",
								group: [
									{
										headerText: "Address",
										key: "Address",
										dataType: "string",
										width: "150px"
									},
									{
										headerText: "City",
										key: "City",
										dataType: "string",
										width: "100px",
										groupOptions: {
											hidden: "parentcollapsed"
										}
									}
								]
							},
							{
								headerText: "Postal Code",
								key: "PostalCode",
								dataType: "string",
								width: "100px",
								groupOptions: {
									hidden: "parentcollapsed"
								}
							}
						],
						groupOptions: {
							expanded: true,
							allowGroupCollapsing: true
						}
					},
					{
						headerText: "Phone Information",
						group: [
							{ headerText: "Phone", key: "Phone", dataType: "string", width: "150px",...