JSFiddle - React, Tailwind, and code Playground

by tugrulorhan

HTML

<div>
<table>
   <thead>
       <tr>
           <th>Fruit</th>
           <th>Color</th>
       </tr>
    </thead>
       
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>
</div>

CSS

/*
 * jQuery UI CSS Framework 1.8.16
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*
 * jQuery UI CSS Framework 1.8.16
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 *
 * To view and modify this theme, visit...

JavaScript

// <reference path="jquery-1.4.1.js" />
// <reference path="jquery-ui-1.8.12.min.js" />
// <reference path="jquery.scrollTo.js" />
// <reference path="jquery.caret.js" />
(function ($) {
    var jqGridSearchElementCount = 0;
    var DOWN = 40, UP = 38, LEFT = 37, RIGHT = 39, ENTER = 13;

    var defaultItems = {
        input: function (container, settings) {
            var img = $('<span></span>').attr("id", "clearInput").addClass("ui-button-icon-secondary ui-icon ui-icon-circle-close").css({
                position: "absolute",
                "margin-top": -8
            }).click(function () {
                $("#" + settings.keyItem).val("");
                $(this).hide();
                container.gridSearch(settings.primaryAction);
            }).hide();
            var span = $("<span></span>")
            .addClass("ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-secondary")
            .css({
                position: "static"
            });

            var input = $('<input type="text" style=\"height:20px\"/>').val(resources.searchText)
            .attr({
                id: settings.keyItem
            })
            .keydown(function (e) { 
                if (e.keyCode == ENTER) {
                    container.gridSearch('filter');
                    e.preventDefault();
                }
            })
            .keyup(function (e) {
                if (e.keyCode == UP) container.gridSearch('before');
                else if (e.keyCode == ENTER) {
                    container.gridSearch('filter');
                    e.preventDefault();
                }
                else container.gridSearch(settings.primaryAction);

                if ($(this).val() != "")
                    $("#clearInput").show();
                else
                    $("#clearInput").hide();
            })
            .addClass(settings.keyItemClass)
            .addClass("ui-widget ui-state-default ui-button-text-icon-primary")
          ...