JSFiddle - React, Tailwind, and code Playground

by dkamburov

HTML

<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://secure-cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://secure-cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/js-data/northwind"></script>
<link href="https://secure-cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://secure-cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<br />
	<h3>Single Cell Selection</h3>
	
	<table id="cellSelectionGrid"></table>
	<br />
	<h3>Multiple Row Selection</h3>
	
	<table id="rowSelectionGrid"></table>
	<h3>Default Row Selectors</h3>
	
	<table id="defaultRowSelectors"></table>
	<br />
	<h3>Row Selectors With Checkboxes</h3>
	
	<table id="cbRowSelectors"></table>
	<br />
	<h3>Row Numbering</h3>
	
	<table id="rowNumbering"></table>

JavaScript

$(function () {
			/*----------------- Instantiation -------------------------*/
			createCellSelectionGrid();
			createRowSelectionGrid();
			createDefaultSelectorsGrid();
			createCboxSelectorsGrid();
			createRowNumberingGrid();
		});

		function createCellSelectionGrid() {
			$("#cellSelectionGrid").igHierarchicalGrid({
				width: "100%",
				autoGenerateColumns: false,
				dataSource: northwind,
				responseDataKey: "results",
				dataSourceType: "json",
				features: [
						{
							name: "Responsive",
							enableVerticalRendering: false,
							columnSettings: [
								{
									columnKey: "Title",
									classes: "ui-hidden-tablet"
								},
								{
									columnKey: "Address",
									classes: "ui-hidden-tablet"
								}
							]
						},
						{
							name: "Selection",
							mode: "cell",
							multipleSelection: false,
							touchDragSelect: false,
							multipleCellSelectOnClick: false
						},
						{
							name: "Paging",
							pageSize: 5,
							type: "local",
							inherit: true
						}
				],
				columns: [
				  { key: "EmployeeID", headerText: "Employee ID", dataType: "number", width: "0%", hidden: true },
				  { key: "LastName", headerText: "Last Name", dataType: "string", width: "10%" },
				  { key: "FirstName", headerText: "First Name", dataType: "string", width: "10%" },
				  { key: "Title", headerText: "Title", dataType: "string", width: "20%" },
				  { key: "Address", headerText: "Address", dataType: "string", width: "20%" },
				  { key: "City", headerText: "City", dataType: "string", width: "10%" }
				],
				autoGenerateLayouts: false,
				columnLayouts: [
					{
						key: "Orders",
						autoGenerateColumns: false,
						width: "100%",
						primaryKey: "OrderID",
						columns: [
							{ key: "OrderID", headerText: "Order ID", dataType: "number", width: "0%", hidden: true },
							{ key: "Freight", headerText: "Freight", dataType: "string", width: "15%" },
							{ key: "ShipName", headerText: "Ship...