JSFiddle - React, Tailwind, and code Playground

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.10.3/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/metro/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: "500px",
				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: "<a href='http://igniteui.com'>RATING DETAILS</a>",
								key: "CompanyName",
								dataType: "string",
								width: "250px"
							}
						]
					},
          {
            headerText: "Contact Name",
            group: [
            	{
                headerText: "<a href='http://infragistics.com'>RATING DETAILS</a>",
                key: "ContactName",
                dataType: "string",
                width: "250px"
              }
            ]
          }
				],
				features: [
					{
						name: 'MultiColumnHeaders'
					},
          {
          	name: "Sorting"
          }
				]
			});
		});
});