JSFiddle - React, Tailwind, and code Playground

HTML

<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>
<script src="http://jqwidgets.com/public/jqwidgets/globalization/globalize.js"></script>
<div id='jqxWidget'>
    <div id="jqxgrid"></div>
</div>

JavaScript

var data = [   {"firstname":"A","lastname":"1","productname":"A","date":'16/12/2014 6:55 PM',"quantity":1,"price":10},
     {"firstname":"B","lastname":"2","productname":"B","date":'02/12/2014 6:55 PM',"quantity":1,"price":10},
     {"firstname":"C","lastname":"3","productname":"C","date":'07/12/2014 6:55 PM',"quantity":1,"price":10}]

 var source = {
     localdata: data,
     datafields: [{
         name: 'firstname',
         type: 'string'
     }, {
         name: 'lastname',
         type: 'string'
     }, {
         name: 'productname',
         type: 'string'
     }, {
         name: 'date',
         type: 'date'
     }, {
         name: 'quantity',
         type: 'number'
     }, {
         name: 'price',
         type: 'number'
     }],
     datatype: "array"
 };

 var adapter = new $.jqx.dataAdapter(source);
  $("#jqxgrid").bind('bindingcomplete', function () {
        $("#jqxgrid").jqxGrid('setcolumnproperty', 'date', 'cellsformat', "dd/MM/yyyy hh:mm tt");
  });

 $("#jqxgrid").jqxGrid({
     width: 500,
     theme: 'energyblue',
     source: adapter,
     filterable: true,
      updatefilterpanel: function (filtertypedropdown1, filtertypedropdown2, filteroperatordropdown, filterinputfield1, filterinputfield2, filterbutton, clearbutton,
            columnfilter, filtertype, filterconditions) {
          if (filtertype == "datefilter") {
                filterinputfield1.jqxDateTimeInput({ formatString:"dd/MM/yyyy" });
                 filterinputfield2.jqxDateTimeInput({ formatString:"dd/MM/yyyy" });
            }
        },
     columns: [{
         text: 'First Name',
         datafield: 'firstname',
         columngroup: 'Name',
         width: 90
     }, {
         text: 'Last Name',
         columngroup: 'Name',
         datafield: 'lastname',
         width: 90
     }, {
         text: 'Product',
         datafield: 'productname',
         width: 170
     }, {
         text: 'Order Date',
         datafield: 'date',
         filtertype: 'date',
 ...