JSFiddle - React, Tailwind, and code Playground

by Ross Dederer

HTML

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20143.59.min.css">
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20143.59.min.js"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20143.59.min.js"></script>
<script src="http://cdn.wijmo.com/external/require.js"></script>
<table id="wijgrid"  style="width:300px">
</table>

JavaScript

requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20143.59",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min",
                "bootstrap": "bootstrap.min", //Needed if you use Bootstrap.
                "knockout": "knockout-3.1.0" //Needed if you use Knockout.
            }
    });

  require(["wijmo.wijgrid"], function () {
    $(document).ready(function () {
        $("#wijgrid").wijgrid({
            cellClicked: function (e, args) {
                alert(args.cell.value());
            },
            allowSorting: false,
            allowPaging: false,
            allowColSizing: true,
            staticColumnIndex: 0,
            scrollMode: "horizontal",
            data: getData(),
            columns: [
                {headerText:"" },
                {headerText: "Group 1", columns:[{dataKey:"Col1", headerText:"Col1"},{dataKey:"Col2", headerText:"Col2"},{dataKey:"Col3", headerText:"Col3"}]},
                 {headerText: "Group 2", columns:[{dataKey:"Col4", headerText:"Col4"},{dataKey:"Col5", headerText:"Col5"},{dataKey:"Col6", headerText:"Col6"}]}
            ]
        });
    });
    });

function getData(){
    var data = [];
//    data =  [['name1','c11','c12','c13','c14','c15','c16'], ['name2','c21','c22','c23','c24','c25','c26'],['name3','c31','c32','c33','c34','c35','c36']  ];
    
for ( var r = 1 ; r < 4 ; r++ )
{

        data.push({
            name: 'Name'+r,
            Col1: 'c'+r+'1',
             Col2: 'c'+r+'2',            
            Col3: 'c'+r+'3',
             Col4: 'c'+r+'4',
             Col5: 'c'+r+'5',
             Col6: 'c'+r+'6'
           
        });
}
    
    return data;
}