Fixed header grid

HTML

<link type="text/css" rel="stylesheet" href="http://localhost:8080/JRS-pro/scripts/components/table/css/table.css">
<link type="text/css" rel="stylesheet" href="http://localhost:8080/JRS-pro/scripts/jquery/theme/redmond/jquery-ui-1.8.20.custom.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link type="text/css" rel="stylesheet" href="http://localhost:8080/JRS-pro/scripts/components/table/css/perfect-scrollbar.css">
    
<script src="http://localhost:8080/JRS-pro/scripts/lib/require-jquery-2.1.2.js"></script>
    
<script src="http://localhost:8080/JRS-pro/scripts/require.config.js"></script>
    
<script>        
var __jrsConfigs__ = {
   urlContext : "http://localhost:8080/JRS-pro",
   isXdm: true
};
    
require.config({
    baseUrl: __jrsConfigs__.urlContext + "/scripts",
});
</script>

    <div id="container" style="margin-top:20px;height:200px;width:200px;"></div>
        
    <div>
        <label>Resize grid:</label><br/>
        <label>Height</label>
        <input type="text" id="gridHeight"></input>
        <label>Width</label>
        <input type="text" id="gridWidth"></input>
        <button id="resizeGrid">Resize grid</button>
    </div>
    
    <div>
        <label>Resize:</label><br/>
        <label>Row</label>
        <input type="text" id="row"></input><br/>
        <label>Column</label>
        <input type="text" id="column"></input><br/>
        <label>Height</label>
        <input type="text" id="height"></input><br/>
        <label>Width</label>
        <input type="text" id="width"></input><br/>
        <button id="resize">Resize</button>
    </div>

JavaScript

//<%-- ****************************************************** --%>
//<%-- US 106                  --%>
//<%-- ****************************************************** --%>
    

    require([
        "jquery",
        "components/table/base/BaseGrid",
        "components/table/FixedHeaderGrid",
        "components/table/base/DynamicGridStrategy",
        "components/table/base/StaticGridDataProvider",         
    ], function($, BaseGrid, FixedHeaderGrid, DynamicGridStrategy, StaticGridDataProvider) {        
        //Create data provider
        //Create data provider
        var dataProvider = new StaticGridDataProvider(gridData).getData,
            headerDataProvider = new StaticGridDataProvider(headerGridData).getData;

        //create and init table component
        var baseGrid =  new FixedHeaderGrid({
            el: "#container",
            strategy: {rows: "Dynamic",
                       cols: "Dynamic"},
            //height: 200,
            //width: 200,
            header: {
                getData: headerDataProvider
                //rowsHeight: 20
            },
            data: {
                getData: dataProvider,
                colsWidth: 40,
                rowsHeight: 40,
                //colsCount: 6,
                //rowsCount: 6, 
                colsBufferSize: 7,
                rowsBufferSize: 7
            }                                                
        });    
                            
        baseGrid.header().on("resize", function() {
            console.log(arguments);
        });
        
        //Initiate table rendering
        baseGrid.render();
        
        console.log(baseGrid);
                
        var resizer = function(){baseGrid.resizeGrid();}/*, {width: 150, height: 150}*/;
        
        $("#resize").on("click", function() {
            baseGrid.resize({
                row: parseInt($("#row").val()),
                column: parseInt($("#column").val()),
                height:...