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>
<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>
<button onclick="addRowToGrid()">
Add Row
</button>
<button onclick="updateRow()">
Update Row
</button>

CSS

#grid_container
        {
            width: 100%;
            max-width: 560px;
        }

JavaScript

$(function () {

            var data = [];
            
            //add rows to the grid to show selected equipments first time
            addRowToGrid = function () {
                var rowObj = {
                    "TrackTrainId": "some random string",
                    "ClassCode": "another random string",
                    "NumberOfCars": 10,
                    "LoadEquipments": "third random string",
                    "EmptyEquipments": "fourth random string",
                    "Tons": 50,
                    "Feet": 120
                };
								rowObj.CompositeKey = rowObj.ClassCode + "|" + rowObj.TrackTrainId;
                $("#grid").igGridUpdating("addRow", rowObj);
						};
            
            updateRow = function () {
                $("#grid").igGridUpdating("updateRow", "another random string|some random string", { NumberOfCars: 1000 });
						};
            
            $("#grid").igGrid({
                 	autoCommit: true,
                  width: "100%",
                  height: '500px',
                  autoGenerateColumns: false,
                  primaryKey: "CompositeKey",
                  columns: [
                  	{ headerText: "", key: "CompositeKey", dataType: "string",hidden:true},
                    { headerText: "Class Code", key: "ClassCode", dataType: "string" },
                    { headerText: "Track/Train", key: "TrackTrainId", dataType: "string" },
                    { headerText: "Cars", key: "NumberOfCars", dataType: "number" },
                    { headerText: "Loads", key: "LoadEquipments", dataType: "string" },
                    { headerText: "Empties", key: "EmptyEquipments", dataType: "string" },
                    { headerText: "Tons", key: "Tons", dataType: "number" },
                    { headerText: "Feet", key: "Feet", dataType: "number" },
                  ],
                  features: [
                    {
                      name: "Updating",
                     ...