JSFiddle - React, Tailwind, and code Playground

by Ziyahan Albeniz

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="jqxgrid" data-bind="jqxGrid: {    
            source: source,
            columns: columns,
            groupable:groupable,
            sortable:sortable,
            theme:theme,
            filterable:filterable,
            autoshowfiltericon:autoshowfiltericon,
            autoheight:autoheight,
            autowidth:autowidth,
            editable:true,
            rowdetails:rowdetails,
            columnsreorder:columnsreorder,            
            showstatusbar:showstatusbar,
            showfilterrow:showfilterrow,
            showtoolbar:showtoolbar,
            enablehover:enablehover,
            columnsresize:columnsresize,
            selectionmode:selectionmode,
            keyboardnavigation:keyboardnavigation,
            showstatusbar:showstatusbar,
            altrows:altrows,
            showaggregates:showaggregates}"></div>

JavaScript

var gridModel = new function(){      
        var self = this;
        self.columns = ko.observableArray([]);
        self.resultset = ko.observableArray([]);    
        self.datafields = ko.observableArray([]); 
        self.visibleColumns = ko.observableArray([""]);      
    
        self.source = ko.observableArray([""]);   

        self. formatValue = function(string){
           var formatted = string;
           try {
            formatted = formatted.toLowerCase();
           } catch( exp) {
               console.log(exp);
           }
            switch(formatted){
                case "true": case "yes": case "1": return true;
                case "false": case "no": case "0": case null: return false;
                default: return string;
            }
        }


        self.load = function() {
            
           new Request.JSON({
                url: '/echo/json/',
            data: {
                json: JSON.encode({
            "visibleColumns": [
                "productionProcessName",
                "unitPrice",
                "currencyName",
                "costCurrencyPrice",
                "notes"
            ],
           
            "config": {
                "groupable": "false",
                "sortable": "false",
                "theme": "'ui-redmond'",
                "filterable": "true",
                "autoshowfiltericon": "true",
                "autoheight": "true",
                "autowidth": "false",
                "editable": "true",
                "rowdetails": "false",
                "columnsreorder": "false",
                "pageable": "true",
                "showstatusbar": "false",
                "showfilterrow": "false",
                "showtoolbar": "false",
                "enablehover": "true",
                "columnsresize": "false",
                "selectionmode": "'singlecell'",
                "keyboardnavigation": "true",
                "altrows": "false",
               ...