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-invoices"></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="grid"></table>

JavaScript

$(function () {
			$("#grid").igGrid({
				autoGenerateColumns: false,
				width: "450px",
				//height: "500px",
				columns: [
					{ headerText: "ID", key: "ID", dataType: "number", width: "0%", hidden: true },
					{ headerText: "Sum X", key: "X", dataType: "number", width: "150px" },
					{ headerText: "Sum Y", key: "Y", dataType: "number", width: "150px" },
          { headerText: "Percent Y", key: "PercentY", dataType: "number", format: "percent", width: "150px" }
				],
				dataSource: [{X: 5, Y: 15, PercentY: 0.75}, {X: 5, Y: 5, PercentY: 0.50}],
				features: [
					{
						name: 'GroupBy',
						groupedRowTextTemplate: "",
						columnSettings: [
							{
								columnKey: "X",
								isGroupBy: false,
                groupLabelFormatter: function(val) {return (val === 1)? "Yes" : "No";},
                summaries: [
									{
										summaryFunction: "custom",
										text: ":",
										customSummary: function (data) {
											var sumY = 0, sumX = 0, groupData = data.allGroupData;
											$.map(groupData, function (d) {
												sumX+=d.X;
											});
											return sumX;
										}
									}
								]
							},
              {
								columnKey: "Y",
                summaries: [
									{
										summaryFunction: "custom",
										text: ":",
										customSummary: function (data) {
											var sumY = 0, sumX = 0, groupData = data.allGroupData;
											$.map(groupData, function (d) {
												sumY+=d.Y;
											});
											return sumY;
										}
									}
								]
							},
							{
								columnKey: "PercentY",
								summaries: [
									{
										summaryFunction: "custom",
										text: ":",
										customSummary: function (data) {
											var sumY = 0, sumX = 0, groupData = data.allGroupData;
											$.map(groupData, function (d) {
												sumX+=d.X;
                        sumY+=d.Y;
											});
											return sumY/(sumX + sumY) *...