Working reorder DEMO: 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/lib/jquery/theme/redmond/jquery-ui-1.8.20.custom.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 src="http://192.168.1.74:8080/jrs_amber_adv/scripts/lib/jquery/ui/jquery.ui.touch-punch.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:250px;width:250px;"></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>Scroll to</label>
    <label>Top</label>
    <input type="text" id="top"></input>
    <label>Left</label>
    <input type="text" id="left"></input>
    <button id="scrollTo">Scroll To</button>
</div>
    
    <button id="removeHS">Remove horizontal scroll</button>
    <button id="removeVS">Remove vertical scroll</button>

JavaScript

require([
      "jquery",
      "components/table/base/BaseGrid",
      "components/table/FixedHeaderGrid",
      "components/table/base/DynamicStrategy",
      "components/table/base/StaticGridDataProvider",
      "components/table/base/BaseGridCellRenderer",
      "components/table/base/BaseGridTemplateCellRenderer",
      "components/table/scrollableWidget/ScrollableWidget"
  ], function ($, BaseGrid, FixedHeaderGrid, DynamicStrategy, StaticGridDataProvider, BaseGridCellRenderer, BaseGridTemplateCellRenderer, ScrollableWidget) {

      //Create data provider
      var dataProvider = new StaticGridDataProvider(gridData),
          headerDataProvider = new StaticGridDataProvider(headerGridData),
          dataProviderGetData = dataProvider.getData,
          headerDataProviderGetData = headerDataProvider.getData,
          colsBufferSize = 7,
          rowsBufferSize = 3,
          template = "<div class='templateCR'>{{=cellMetadata.label}}</div>",
          cellRenderer = new BaseGridCellRenderer(),
          templateCellRenderer = new BaseGridTemplateCellRenderer({template: template});         
     
      cellRenderer.initGrid = function($el){
          $el.on("mousedown", _onClick);
      }; 
      
      cellRenderer.remove = function($el){
          $el.off("mousedown", _onClick);
      }; 
      
      var state = true;  
      
      _onClick = function(e) {
          var $cell = $(e.target).closest("td");
          console.log("Column: " + $cell.data("column") + " row: " + $cell.data("row"));
           
          if ( state ) {
            $cell.animate({
                fontSize: "20",
                color: "#003366"
            }, 500 );
          } else {
            $cell.animate({
                color: "#666",
                fontSize: "11",
            }, 500 );
          }
          state = !state;    
      };

      //create and init table component
      var baseGrid = new FixedHeaderGrid({
          el: "#container",
          /*strategy:...