JSFiddle - React, Tailwind, and code Playground

by billybraga

HTML

<div id="grid_json" style="margin:auto;"></div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script><script src="http://paramquery.com/pro2/Content/js3.3.0/pqgrid.min.js"></script><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" /><link href="http://paramquery.com/pro2/Content/css3.3.0/pqgrid.min.css" type="text/css" rel="stylesheet"><link href="http://paramquery.com/pro2/Content/css3.3.0/pqgrid.ui.min.css" type="text/css" rel="stylesheet"><link href="http://paramquery.com/pro2/Content/css3.3.0/themes/office/pqgrid.css" type="text/css" rel="stylesheet">

JavaScript

var colCount = 50;
var cols = [];

for (var i = 0; i < colCount; i++) {
	cols.push(i);
}

var data = {};

cols.forEach(function(i) { 
  data["col" + i] = "test" + i;
});

$(function () {
  $("#grid_json").pqGrid({
  	dataModel: {
    	data: [data]
    },
  	colModel: cols.map(function(i) { 
    	return {
        title: "Column " + i,
        dataIndx: "col" + i,
        dataType: "string",
        align: "right",
        width: 200
    	};
     })
  });
});