JSFiddle - React, Tailwind, and code Playground

by digiguru

HTML

<div>
 <script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js"></script>
         <script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js" type="text/javascript"></script>   
   <script src="http://alpha.hitched.co.uk/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>

<textarea style="float: left; clear: none; font-size: xx-small;" id="ExampleData" cols="120" rows="40">
    
</textarea>
<a href="#" class="apply-data">apply data</a>

<div style="float: left; clear: none; ">
    Group By: <select id="chngroup">
    <option value="name">Client name</option>
    <option value="tax">tax</option>
    <option value="clear">Remove Grouping</option>    
</select>


        <table id="list" style="float: left; clear: none; ">
        </table>
 </div>
</div>

CSS

/*
* jQuery UI CSS Framework
* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
*/

/* Layout helpers
----------------------------------*/
.merge-rows, .merge-rows td  { background-color: #FF9900; } 
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.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
* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
* To view and modify this theme, visit...

JavaScript

var mydata = [
        { "id": "1", "invited": "true" , "gender":"Male"   , "name": "Adam Hall",        "firstname":"Adam",        "lastname":"Hall",      "note": "note",                         "tax": "10.00", "total": "2111.00" },
        { "id": "2", "invited": "false", "gender":"Male"   , "name": "Antonio Sampedro", "firstname": "Antonio",    "lastname": "Sampedro", "note": "note2",                        "tax": "20.00", "total": "320.00" },
        { "id": "3", "invited": "true",  "gender":"Female" , "name": "Aimee Read",       "firstname": "Aimee",      "lastname": "Read",     "note": "note3",                        "tax": "30.00", "total": "430.00" },
        { "id": "4", "invited": "true",  "gender":"Male"   , "name": "Simon Dawson",     "firstname": "Simon",      "lastname": "Dawson",   "note": "note",                         "tax": "10.00", "total": "210.00" },
        { "id": "5", "invited": "true",  "gender":"Male"   , "name": "Dean Yardley",     "firstname": "Dean",       "lastname": "Yardley",  "note": "note2",                        "tax": "20.00", "total": "320.00" },
        { "id": "6", "invited": "true",  "gender":"Female" , "name": "Nicola Yardley",   "firstname": "Nicola",     "lastname": "Yardley",  "note": "note3",                        "tax": "30.00", "total": "430.00" },
        { "id": "7", "invited": "true",  "gender":"Male"   , "name": "Caroline Hendry",  "firstname": "Caroline",   "lastname": "Hendry",   "note": "note",                         "tax": "10.00", "total": "210.00" },
        { "id": "8", "invited": "true",  "gender":"Male"   , "name": "Nitin Patil",      "firstname": "Nitin",      "lastname": "Patil",    "note": "note2",    "amount": "300.00", "tax": "21.00", "total": "320.00" },
        { "id": "9", "invited": "true",  "gender":"Male"   , "name": "Mangesh Zalke",    "firstname": "Mangesh",    "lastname": "Zalke",    "note": "note3",    "amount": "400.00", "tax": "30.00", "total": "430.00" },
       { "id": "10",...