JSFiddle - React, Tailwind, and code Playground

by georgianastasov

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-data/nw-employees"></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>

<fieldset id="pasteOptions" class="explorer">
		<label for="pasteMode">Select Paste mode:</label>
		<input id="pasteMode"></input>
	</fieldset>
	<fieldset class="explorer">
		<table id="grid"></table>
	</fieldset>

		<fieldset id="editingOptions" class="explorer">
			<input type="button" id="saveChanges" class="button-style" value="Save Changes"></input>
			<input type="button" id="undo" class="button-style" value="Undo"></input>
			<input type="button" id="redo" class="button-style" value="Redo"></input>
		</fieldset>

JavaScript

$(function () {
				var pasteMode = "Paste data as new records", updates;
				var grid = $("#grid");

				//editors and buttons
				$("#pasteMode").igCombo({
					mode: "dropdown",
					width: "300px",
					dataSource: [
						 "Paste data as new records",
						 "Paste starting from active cell"
					],
					selectionChanged: function (evt, ui) {
						if (ui.items.length == 1) {
							pasteMode = ui.items[0].data.value;
						}
					}
				});

				$("#saveChanges").igButton({ labelText: $("#saveChanges").val(), disabled: true });
				$("#undo").igButton({ labelText: $("#undo").val(), disabled: true });
				$("#redo").igButton({ labelText: $("#redo").val(), disabled: true });

				$("#undo").on('igbuttonclick',
					function (e, args) {
						updates = $.extend({}, grid.data('igGrid').pendingTransactions());
						$.each(updates, function (index, transaction) {
							grid.igGrid("rollback", transaction.rowId, true);
						});
						$("#redo").igButton("option", "disabled", false);
						$("#undo").igButton("disable");
						$("#saveChanges").igButton("disable");
						return false;
					}
				);

				$("#redo").on('igbuttonclick',
					function (e) {
						$.each(updates, function (index, transaction) {
							switch (transaction.type) {
								case "row":
									grid.igGridUpdating('updateRow', transaction.rowId, transaction.row, null, false);
									break;
								case "newrow":
									grid.igGridUpdating('addRow', transaction.row, false);
									break;
								case "deleterow":
									grid.igGridUpdating('deleteRow', transaction.rowId, false);
									break;
							}

						});
						$(this).igButton("disable");
						$("#undo").igButton("option", "disabled", false);
						$("#saveChanges").igButton("option", "disabled", false);
					}
				);

				$("#saveChanges").on('igbuttonclick',
				   function (e) {
				   	grid.igGrid("commit");
				   	updates = null;
				   	$("#undo").igButton("disable");
				   	$(this).igButton("disable");
				  ...