JSFiddle - React, Tailwind, and code Playground

by dkamburov

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

<label>Switch Filtering Mode:</label>
	<br />
	<input type="text" id="filterType"></input>
	<table id="gridSimpleFiltering"></table>
	<br />
  <button onclick="fixFilterWidth()">Hide and Show filteirng row</button>

JavaScript

$.ig.loader({
  scriptPath: "https://cdn-na.infragistics.com/igniteui/latest/js",
  cssPath: "https://cdn-na.infragistics.com/igniteui/latest/css",
  resources: "igGrid.*, igCombo"
});
$.ig.loader(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"
      },
      {
        name: "RegistererTime"
      }
    ],
  });
  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) {
 ...