JSFiddle - React, Tailwind, and code Playground

by Chethan Srinivas

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
    </div>
    <input type="button" value="click" id="jqxButton"/>

JavaScript

var data_local = [{name:'name',type:'type',calories:'1',totalfat:'totalfat',protein:'protein'}]
            // prepare the data
						var datafields = [
                    { name: 'name', type: 'string' },
                    { name: 'type', type: 'string' },
                    { name: 'calories', type: 'int' },
                    { name: 'totalfat', type: 'string' },
                    { name: 'protein', type: 'string' }
                ];
						var  columns= [
                  { text: 'Name', datafield: 'name', width: 250 },
                  { text: 'Beverage Type', datafield: 'type', width: 250 },
                  { text: 'Calories', datafield: 'calories', width: 180 },
                  { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                  { text: 'Protein', datafield: 'protein', minwidth: 120 }
              ]
            var p = {
                width: 850,
                columnsresize: true,
								datafields:datafields,
								columns:columns}
						loadGrid(p,data_local)
            
             $("#jqxButton").jqxButton({
                 theme: 'energyblue'
             });

             $('#jqxButton').on('click', function () {
                 reloadGrid(p,data_local)
             });
						 
						 
						function reloadGrid( p, data) {
						data = [{name:'name',type:'type',calories:'1',totalfat:'totalfat',protein:'protein'},{name:'name',type:'type',calories:'1',totalfat:'totalfat',protein:'protein'}]
							var source =
							{
									datatype: "json",
									datafields: p.datafields,
									localdata: data
							};
							var dataAdapter = new $.jqx.dataAdapter(source);
							// initialize jqxGrid

							

							$('#jqxgrid').jqxGrid('_columns', null);
							$('#jqxgrid').jqxGrid('columns', p.columns);
							$('#jqxgrid').jqxGrid(
							{
									source: dataAdapter
							});
					}
					
					function loadGrid(p, data) {
							alert('');
							$.each(p.columns, function (index, item)...