JSFiddle - React, Tailwind, and code Playground

by Sibeesh Venu

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxdata.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxbuttons.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxscrollbar.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxlistbox.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxdropdownlist.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxmenu.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxgrid.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxgrid.filter.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxgrid.sort.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxgrid.selection.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxpanel.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxcheckbox.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxgrid.pager.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxgrid.edit.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxgrid.columnsresize.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxgrid.columnsreorder.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxgrid.export.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxdata.export.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<table id="YearlyGridReport" class="display dataTable no-footer" role="grid" aria-describedby="YearlyGridReport_info" style="width: 1501px;">
        <thead>
            <tr role="row">
                <td class="titleAllLockedCell" rowspan="1" colspan="1">Year Description</td>
                <td class="titleAllLockedCell" rowspan="1" colspan="1"></td>
                <th class="titleTopLockedCell" colspan="8"...

JavaScript

$(document).ready(function () {

             //@*JQX Grid needed implementation  starts here*@
             var title = 'Test Multi Grid';
             var topLockedColumnText = $("#YearlyGridReport thead tr td:first").text();
             $("#YearlyGridReport thead tr td:first").text(topLockedColumnText).css('font-wieght', 'bold', '!important');;
             var column_DimensionOrMeasure;
             //if (GridProperty.selectedColumn_DimensionOrMeasure.indexOf("dimension") > 0)
             //    column_DimensionOrMeasure = "dimension";
             //else
                 column_DimensionOrMeasure = "measure";
             var pinnedColumn = ''
            // $("#YearlyGridReport").hide();
             var rows = $("#YearlyGridReport tbody tr");
             // select columns.
             var columns = $("#YearlyGridReport thead tr th,#YearlyGridReport thead tr td");
             var data = [];
             var cellFormatArrray = [];
             var cellFormatPercArrray = [];
             var cellRowFormatArrray = [];
             var columnDataTypeArrray = [];
             var firstcolumnHeaderName;
             var val;
             for (var i = 0; i < rows.length; i++) {
                 var row = rows[i];
                 var datarow = {};
                 for (var j = 0; j < columns.length; j++) {
                     // get column's title.
                     var columnName = $.trim($(columns[j]).text()) + j;
                     // select cell.
                     if (j == 0) {
                         columnName = topLockedColumnText + j;
                     }
                     var cell = $(row).find('td:eq(' + j + ')');
                     var cellContent = cell.text();
                     if (column_DimensionOrMeasure == "measure") {
                         if (cellContent.toLowerCase().indexOf("$") >= 0) {
                             cellFormatArrray[j] = columnName;
                             val = parseFloat(cellContent);
         ...