JSFiddle - React, Tailwind, and code Playground

by dkamburov

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>
<script src="http://igniteui.com/js-data/employee-data-allDatatypes"></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>

<label>Switch Filtering Mode:</label>
	<br />
	<input type="text" id="filterType"></input>
	<table id="gridSimpleFiltering"></table>
	<br />

JavaScript

$(function () {
			var f = true, ds, schema;

			schema = new $.ig.DataSchema("array", {
				fields: [
					{ name: "FirstName", type: "string" },
					{ name: "LastName", type: "string" },
					{
						name: "RegistererDate", type: "date", formatter: function (value, record) {
							return value.toLocaleDateString();
						}
					},
					{ name: "Country", type: "string" },
					{ name: "Age", type: "number" },
					{ name: "IsActive", type: "bool" }
				],
			});
			ds = new $.ig.DataSource({
				dataSource: employees,
				schema: schema,
				filtering: {
					type: "local"
				}
			}).dataBind();

			$("#filterType").igCombo({
				mode: "dropdown",
				textKey: "text",
				valueKey: "value",
				dataSource: [
					{ value: "Simple Filtering", text: "Simple Filtering" },
					{ value: "Search By Text", text: "Search By Text" }
				],
				initialSelectedItems : [
					{ value: "Simple Filtering" }
				],
				selectionChanged: function (evt, args) {
					f = args.items[0].data.value === "Simple Filtering";
					createSimpleFilteringGrid(f, ds);
				}
			});
			$(document).delegate("#gridSimpleFiltering", "igcontrolcreated", function (evt, args) {
				if (!f) {
					createSearchField(args.owner, ds);
				}
			});
			createSimpleFilteringGrid(f, ds);
		});
		function createSearchField(grid, ds) {
			var upperPager = grid.container().find(".ui-iggrid-pagesizedropdowncontainerabove"),
				field = $('<input id="filterByText" />');

			upperPager.prepend(field);
			field.igTextEditor({
				placeHolder: "Search...",
				height: "22px",
				textChanged: function (evt, args) {
					ds.filterByText(args.text);
					$(grid.element).igGrid("option", "dataSource", ds.dataView());
				}
			});
		}
		function createSimpleFilteringGrid(f, ds) {
			var features = [
					{
						name: "Paging",
						type: "local",
						pageSize: 10
					}
			];
      let prevFiltingValue = null;

			if (f) {
				features.push({
					name: "Filtering",
					type: "local",
					mode: "simple",
  ...