JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.src.js"></script>
<table id="list_One"></table>
<div id="pager_One"></div>

CSS

.ui-jqgrid-hdiv { overflow-y: hidden; }

JavaScript

$.jgrid.extend({
    setColWidth: function (iCol, newWidth, adjustGridWidth) {
        "use strict";
        return this.each(function () {
            var $self = $(this), grid = this.grid, colName, colModel, i, nCol;
            if (typeof iCol === "string") {
                // the first parametrer is column name instead of index
                colName = iCol;
                colModel = $self.jqGrid("getGridParam", "colModel");
                for (i = 0, nCol = colModel.length; i < nCol; i++) {
                    if (colModel[i].name === colName) {
                        iCol = i;
                        break;
                    }
                }
                if (i >= nCol) {
                    // error: non-existing column name specified as the first parameter
                    return;
                }
            } else if (typeof iCol !== "number") {
                return; // error: wrong parameters
            }
            grid.resizing = { idx: iCol };
            grid.headers[iCol].newWidth = newWidth;
            if (adjustGridWidth !== false) {
                grid.newWidth = grid.width + newWidth - grid.headers[iCol].width;
            }
            grid.dragEnd();   // adjust column width
            if (adjustGridWidth !== false) {
                // adjust grid width too
                $self.jqGrid("setGridWidth", grid.newWidth, false);
            }
        });
    }
});

var dataArray = [
    {valueA:'a01', valueB:'b01', valueC:'c01', valueD:'d01'},
    {valueA:'a02', valueB:'b02', valueC:'c02', valueD:'d02'},
    {valueA:'a03', valueB:'b03', valueC:'c03', valueD:'d03'},
    {valueA:'a04', valueB:'b04', valueC:'c04', valueD:'d04'},
    {valueA:'a05', valueB:'b05', valueC:'c05', valueD:'d05'},
    {valueA:'a06', valueB:'b06', valueC:'c06', valueD:'d06'},
    {valueA:'a07', valueB:'b07', valueC:'c07', valueD:'d07'},
    {valueA:'a08', valueB:'b08', valueC:'c08', valueD:'d08'},
    {valueA:'a09', valueB:'b09', valueC:'c09',...