JSFiddle - React, Tailwind, and code Playground

by dkamburov

HTML

<script src="https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.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/2019.2/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/2019.2/latest/js/infragistics.lob.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js" type="text/javascript"></script>
<script src="https://cdn-na.infragistics.com/igniteui/2019.2/latest/js/extensions/infragistics.ui.tree.knockout-extensions.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/2019.2/latest/js/extensions/infragistics.ui.editors.knockout-extensions.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/2019.2/latest/js/extensions/infragistics.datasource.knockoutjs.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/2019.2/latest/js/extensions/infragistics.ui.grid.knockout-extensions.js"></script>
<script src="https://igniteui.github.io/help-samples/js/apiviewer.js"></script>
<script src="https://igniteui.github.io/help-samples/data-files/nw-customers-with-orders.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/2019.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet">
<link href="https://cdn-na.infragistics.com/igniteui/2019.2/latest/css/structure/infragistics.css" rel="stylesheet">
<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,
		autoGenerateColumns: false,
		autoFitLastColumn: false,
		columns: [
			{ headerText: 'Customer ID', key: 'ID', dataType: 'string', rowIndex: 0,...

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));
		}

	}

	$(function () {

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