Crosstab

by obobruyko

HTML

<link rel="stylesheet" type="text/css" href="http://localhost:8080/JRS-pro/scripts/components/table/css/perfect-scrollbar.css">
<link rel="stylesheet" type="text/css" 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">
            
<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://localhost:8080/JRS-pro/scripts/lib/jquery/js/jquery-ui-1.8.20.custom.min.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>
<button id="left" style="margin-top: 50px;">Left</button>
<button id="right">Right</button>
<button id="resizeSelected">Resize selected</button>
    
    <div>
        <label>Height:</label>
        <input id="height" type="text" value="300"/>
         <label>Width:</label>
        <input id="width" type="text" value="300"/>
        <button id="resizeGrid">Resize grid</button>
    </div>

JavaScript

require([
    "jquery",
    "components/table/Crosstab",
    "components/table/base/DynamicStrategy",
    "components/table/base/StaticGridDataProvider",
], function($, Crosstab, DynamicStrategy, StaticGridDataProvider) {
    
    //Create data provider
    var dataProvider = new StaticGridDataProvider(gridData).getData,
        headerDataProvider = new StaticGridDataProvider(headerData).getData,
        columnGroupDataProvider = new StaticGridDataProvider(columnGroupData).getData,
        rowGroupDataProvider = new StaticGridDataProvider(rowGroupData).getData;
    
    //create and init table component
    var crosstab = new Crosstab({
        el: "#container",
        width: 250,
        height: 200,
        /*strategy: {
            rows: "Dynamic",
            cols: "Dynamic",
        },*/
        header: {
            getData: headerDataProvider,
            gridHeight: 0,
            gridWidth: 0,
            colsCount: 0,
            rowsCount: 0,
            colsBufferSize: 0
        },
        columnGroup: {
            getData: columnGroupDataProvider,
            //gridHeight: 150,
            //gridWidth: 100,
            //colsCount: 3,
            rowsCount: 0,
            colsBufferSize: 0       
        },
        rowGroup: {
            getData: rowGroupDataProvider,
            //gridHeight: 200,
            gridWidth: 99,
            colsCount: 3,
            //rowsCount: 5,
            colsBufferSize: 3,
            rowsBufferSize: 6
        },        
        data: {
            getData: dataProvider,
            gridHeight: 300,
            gridWidth: 500,
            //colsCount: 3,
            //rowsCount: 5,
            colsBufferSize: 5,
            rowsBufferSize: 6
        }
    });
    crosstab.render();
    
    console.log(crosstab);
    
    var resizer = function(){crosstab.resizeGrid(/*{width: 400, height: 400}*/);}

    $("#container").resizable({                            
            stop: resizer,
            ghost: true,
  ...