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">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/ui.multiselect.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/plugins/ui.multiselect-fixed.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/js/jquery.jqGrid.src-columnChooser.js"></script>
<script src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/plugins/jQuery.jqGrid.setColWidth.js"></script>
<table id="list_records"><div id="perpage"></div></table>

CSS

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

JavaScript

var mydata = [
    {id:"1",invdate:"2007-10-01zdfsdf sdfsdfsdf sdfsdfsdf ",name:"test"},
    {id:"2",invdate:"2007-10-02",name:"test2"},
    {id:"3",invdate:"2007-09-01",name:"test3"},
    {id:"4",invdate:"2007-10-04",name:"test"},
    {id:"5",invdate:"2007-10-05",name:"test2"},
    {id:"6",invdate:"2007-09-06",name:"test3"},
    {id:"7",invdate:"2007-10-04",name:"test"},
    {id:"8",invdate:"2007-10-03",name:"test2"},
    {id:"9",invdate:"2007-09-01",name:"test3"},
    {id:"10",invdate:"2007-10-01",name:"test"},
    {id:"11",invdate:"2007-10-02",name:"test2"},
    {id:"12",invdate:"2007-09-01",name:"test3"},
    {id:"13",invdate:"2007-10-04",name:"test"},
    {id:"14",invdate:"2007-10-05",name:"test2"},
    {id:"15",invdate:"2007-09-06",name:"test3"},
    {id:"16",invdate:"2007-10-04",name:"test"},
    {id:"17",invdate:"2007-10-03",name:"test2"},
    {id:"18",invdate:"2007-09-01",name:"test3"}
];

$("#list_records").on("jqGridAfterLoadComplete jqGridRemapColumns", function () {
    var $this = $(this), iCol, iRow, rows, row, cm, colWidth,
        $cells = $this.find(">tbody>tr>td"),
        $colHeaders = $(this.grid.hDiv).find(">.ui-jqgrid-hbox>.ui-jqgrid-htable>thead>.ui-jqgrid-labels>.ui-th-column>div"),
        colModel = $this.jqGrid("getGridParam", "colModel"),
        n = $.isArray(colModel) ? colModel.length : 0,
        idColHeadPrexif = "jqgh_" + this.id + "_";

    $cells.wrapInner("<span class='mywrapping'></span>");
    $colHeaders.wrapInner("<span class='mywrapping'></span>");

    for (iCol = 0; iCol < n; iCol++) {
        cm = colModel[iCol];
        colWidth = $("#" + idColHeadPrexif + $.jgrid.jqID(cm.name) + ">.mywrapping").outerWidth() + 25; // 25px for sorting icons
        for (iRow = 0, rows = this.rows; iRow < rows.length; iRow++) {
            row = rows[iRow];
            if ($(row).hasClass("jqgrow")) {
                colWidth = Math.max(colWidth, $(row.cells[iCol]).find(".mywrapping").outerWidth());
            }
        }
       ...