JSFiddle - React, Tailwind, and code Playground

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-data/nw-customers"></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>

<script id="colTmpl" type="text/template">
		{{if ${ContactTitle} === "Sales Representative" }}
			<div class='blueCell'>${ContactTitle}</div>
		{{elseif ${ContactTitle} === "Owner"}} 
			<div class='redCell'>${ContactTitle}</div>
		{{else}}
			<div class='greenCell'>${ContactTitle}</div>
		{{/if}}
	</script>
<script id="colTmpl1" type="text/template">
		{{if ${ContactTitle} === "Sales Representative" }}
		<div class='blueCell'>${Phone}</div>
		{{elseif ${ContactTitle} === "Owner"}}
		<div class='redCell'>${Phone}</div>
		{{else}}
		<div class='greenCell'>${Phone}</div>
		{{/if}}
	</script>

<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",
				rowsRendered: function(evt, ui) {
					colorizeColumn("blue", "#0234d7");
					colorizeColumn("green", "#0e9d5f");
					colorizeColumn("red", "#ff6a00");
				},
				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"
										}
									}
								],
								groupOptions: {
									expanded: true,
									allowGroupCollapsing: true,
									hidden: "parentcollapsed"
								}
							},
							{
								headerText: "Postal Code",
								key: "PostalCode",
								dataType: "string",
								width: "100px",
								groupOptions:...