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/external/knockout-latest.js"></script>
<script src="https://igniteui.com/js/external/knockout.mapping-latest.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/extensions/infragistics.ui.tree.knockout-extensions.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/extensions/infragistics.ui.editors.knockout-extensions.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/extensions/infragistics.datasource.knockoutjs.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/extensions/infragistics.ui.grid.knockout-extensions.js"></script>
<script src="https://igniteui.com/js/apiviewer.js"></script>
<script src="https://igniteui.com/js-data/nw-customers-with-orders"></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>

<div id="error-message" style="color: #FF0000; font-weight: bold;"></div>

	<table id="gridKO" data-bind="igGrid: {
		dataSource: data,
		primaryKey: 'ID',
		width: '100%',
		autoCommit: true,
		features: [
			{
				name: 'Updating',
				editMode: 'row',
				columnSettings: [
					{
						columnKey: 'ID',
						readOnly: true
					}
				],
				generatePrimaryKeyValue: function ( evt, ui )
				{
					// setting a primary key for the new row
					ui.value = 'PK' + ui.value;
				},
				rowDeleting: function (evt, ui) {
					var...

CSS

body {
			padding: 0px !important;
			margin: 0px !important;
		}

JavaScript

$(function () {
var itemsModel, db = nwCustomersWithOrders;

		var Item = function (ID, ContactName, City, Country) {
			var self = this;
			this.ID = ko.observable(ID);
			this.ContactName = ko.observable(ContactName);
			this.City = ko.observable(City);
			this.Country = ko.observable(Country);
		}

		function ItemsViewModel() {
			var self = this;
			self.data = ko.observableArray([]);
			self.selectedItemID = ko.observable(0);

			for (var i = 0; i < db.length; i++) {
				self.data.push(new Item(db[i].ID, db[i].ContactName, db[i].City, db[i].Country));
			}

			self.selectionChanged = function (evt, ui) {
				var rowdata = ui.row;
				// find it in the array so we don't lose the observables
				var selectedItemInArray = ko.utils.arrayFirst(self.data(), function (item) {
					return item.ID() === rowdata.id;
				});

				if (selectedItemInArray != null) {
					self.selectedItemID(parseInt(rowdata.index));
				}
				else {
					self.selectedItemID(0);
				}
			};
		}

		$(function () {
			// Used to show output in the API Viewer at runtime,
			// defined in external script 'apiviewer.js'
			var apiViewer = new $.ig.apiViewer();

			itemsModel = new ItemsViewModel();
			ko.applyBindings(itemsModel);
		});
});