JSFiddle - React, Tailwind, and code Playground

by Alexander Malyavkin

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://vocadb.googlecode.com/svn-history/r582/VocaDb/VocaDbWeb/Scripts/jqwidgets/jqxcore.js"></script>
<script src="https://my-magento-commerce-project.googlecode.com/svn-history/r108/trunk/magentoCommerce/skin/frontend/base/default/jqwidgets/jqwidgets/jqxdata.js"></script>
<script src="https://my-magento-commerce-project.googlecode.com/svn-history/r108/trunk/magentoCommerce/skin/frontend/base/default/jqwidgets/jqwidgets/jqxbuttons.js"></script>
<script src="https://vocadb.googlecode.com/svn-history/r320/VocaDb/VocaDbWeb/Scripts/jqwidgets/jqxscrollbar.js"></script>
<script src="https://vocadb.googlecode.com/svn-history/r503/VocaDb/VocaDbWeb/Scripts/jqwidgets/jqxmenu.js"></script>
<script src="https://my-magento-commerce-project.googlecode.com/svn-history/r108/trunk/magentoCommerce/skin/frontend/base/default/jqwidgets/jqwidgets/jqxlistbox.js"></script>
<script src="https://vocadb.googlecode.com/svn-history/r426/VocaDb/VocaDbWeb/Scripts/jqwidgets/jqxdropdownlist.js"></script>
<script src="https://my-magento-commerce-project.googlecode.com/svn-history/r108/trunk/magentoCommerce/skin/frontend/base/default/jqwidgets/jqwidgets/jqxgrid.js"></script>
<script src="https://my-magento-commerce-project.googlecode.com/svn-history/r108/trunk/magentoCommerce/skin/frontend/base/default/jqwidgets/jqwidgets/jqxgrid.selection.js"></script>
<script src="https://openappengine.googlecode.com/svn-history/r607/branches/grails/openappengine/web-app/js/jqwidgets/jqxgrid.columnsresize.js"></script>
<script src="https://openappengine.googlecode.com/svn-history/r626/branches/grails/openappengine/web-app/js/jqwidgets/jqxgrid.filter.js"></script>
<script src="https://openappengine.googlecode.com/svn-history/r626/branches/grails/openappengine/web-app/js/jqwidgets/jqxgrid.sort.js"></script>
<script...

JavaScript

var data = [
	{"firstname": "Lucian", "Date": ""},
    {"firstname": "Alex", "Date": "10-2-2014"},
    {"firstname": "Anna", "Date": "10-3-2014"},
    {"firstname": "Karl", "Date": ""},
    {"firstname": "Innel", "Date": "10-5-2014"},
    {"firstname": "Rita", "Date": "10-6-2014"},
    {"firstname": "Ada", "Date": ""},
    {"firstname": "Brian", "Date": "10-8-2014"}
    ];

var source =
{    
          localdata: data,
          datatype: "array",
          datafields: [{
          name: 'firstname',
          type: 'string'
      }, {
          name: 'Date',
          type: 'date'
      }]
  };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 500,
                source: dataAdapter,
                sortable: true,
                filterable: true,
                filtermode: 'excel',
                columnsresize: true,
                autoshowfiltericon: false,
                columns: [{ 
                           text: 'Date',
                           datafield: 'Date', 
                           width: 250, 
                           cellsformat: "d",
                            },
                          { 
                            text: 'First Name', 
                            datafield: 'firstname', 
                            width: 250 }]
            });