working jqGrid Example

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<div id="foo">A top div</div>
<div class="myGridDiv">
    <table id="grid"></table>
</div>

CSS

.ui-jqgrid .ui-jqgrid-bdiv {
    max-height: 100px;
    overflow-x: hidden;
}

.myGridDiv{
    position:absolute;
    bottom:10px;
}

#foo {
    height:500px;
    width:500px;
    clear:both;
}

JavaScript

var numberTemplate = {width: 60, formatter: "integer", formatoptions: {thousandsSeparator: " "}, sorttype: "integer"};
$("#grid").jqGrid({
    datatype: "local",
    height: "auto",
    hiddengrid:true,
    gridview: true, // to improve performance
    rowNum: 10000, // to have no local paging
    colNames: ['','1992','1997','2002','2007','2012','2017','2022','2027','2032','2037'],
    colModel: [{name:'Name', width: 80, key: true},{name:'Col0', template: numberTemplate},{name:'Col1', template: numberTemplate},{name:'Col2', template: numberTemplate},{name:'Col3', template: numberTemplate},{name:'Col4', template: numberTemplate},{name:'Col5', template: numberTemplate},{name:'Col6', template: numberTemplate},{name:'Col7', template: numberTemplate},{name:'Col8', template: numberTemplate},{name:'Col9', template: numberTemplate}],
    caption: "Stack Overflow Example",
    data:[{ Name: 'County1', Col0: 11273, Col1: 11431, 
                                 Col2: 12515, Col3: 13414, Col4: 15143,
                                 Col5: 16852, Col6: 18362, Col7: 19698, 
                                 Col8: 20821, Col9: 21734 },
                               { Name: 'County2', Col0: 22530, Col1: 24457,
                                 Col2: 25763, Col3: 27247, Col4: 28970,
                                 Col5: 31135, Col6: 32977, Col7: 34649,
                                 Col8: 36020, Col9: 37158 },
                               { Name: 'County3', Col0: 11909, Col1: 12734, 
                                 Col2: 14037, Col3: 14873, Col4: 17284, 
                                 Col5: 20083, Col6: 22877, Col7: 25603, 
                                 Col8: 28064, Col9: 30210 },
                               { Name: 'County4', Col0: 10465, Col1: 12165, 
                                 Col2: 12962, Col3: 13890, Col4: 15154, 
                                 Col5: 16293, Col6: 17284, Col7: 18174, 
                                 Col8: 18897, Col9: 19446 },
         ...