DEMO: Crosstab with resizers.

by obobruyko

HTML

<link rel="stylesheet" type="text/css" href="http://192.168.1.55:8080/jrs_amber_adv/themes/reset.css"> 
<link rel="stylesheet" type="text/css" href="http://192.168.1.55:8080/jrs_amber_adv/themes/default/containers.css"> 
<link rel="stylesheet" type="text/css" href="http://192.168.1.55:8080/jrs_amber_adv/themes/default/theme.css">
<link rel="stylesheet" type="text/css" href="http://192.168.1.55:8080/jrs_amber_adv/scripts/components/table/css/perfect-scrollbar.css">
<link rel="stylesheet" type="text/css" href="http://192.168.1.55:8080/jrs_amber_adv/scripts/components/table/css/table.css">
<link rel="stylesheet" type="text/css" href="http://192.168.1.55:8080/jrs_amber_adv/scripts/lib/jquery/theme/redmond/jquery-ui-1.10.4-custom.css">
            
<script src="http://192.168.1.55:8080/jrs_amber_adv/scripts/lib/require-2.1.10.js"></script>
<script src="http://192.168.1.55:8080/jrs_amber_adv/scripts/require.config.js"></script>            
<script>
var __jrsConfigs__ = {    
    contextPath: "http://192.168.1.55:8080/jrs_amber_adv",
    userLocale: "en",
   isXdm: true
};
    
require.config({
    baseUrl: __jrsConfigs__.contextPath + "/scripts",
});
</script>

<div id="container" style="margin:20px;height:400px;width:701px"></div>
    
<!--<button id="resizeSelected">Resize selected</button>-->
 
    <div style="margin:60px 40px;">
        <button id="showHideRG">show/hide rowGroup</button>
        <button id="showHideCG">show/hide columnGroup</button>
        <!--<div>
            <input id="height" type="text"/>
            <button id="resizeCG">Resize columnGroup</button>
        </div>
        <div>
            <input id="width" type="text"/>
            <button id="resizeRG">Resize rowGroup</button>
        </div>
        
        <div>
            <input id="gridWidth" type="text" placeholder="Grid width"/>
            <input id="gridHeight" type="text" placeholder="Grid height"/>
            <button id="resizeGrid">Resize grid</button>
        </div>-->
       ...

CSS

button

JavaScript

require([
    "jquery",
    "components/table/Crosstab",
    "components/table/base/DynamicStrategy",
    "components/table/base/StaticGridDataProvider",
    "components/table/scrollableWidget/ScrollableWidget"
], function($, Crosstab, DynamicStrategy, StaticGridDataProvider, ScrollableWidget) {
    
    //Create data provider
    var dataProvider = new StaticGridDataProvider(gridData).getData,
        headerDataProvider = new StaticGridDataProvider(headerData).getData,
        columnGroupDataProvider = new StaticGridDataProvider(columnGroupData).getData,
        rowGroupDataProvider = new StaticGridDataProvider(rowGroupData).getData,
        colsBufferSize = 5,
        rowsBufferSize = 5;    
    
    //create and init table component
    var crosstab = new Crosstab({
        el: "#container",
        //height: 200,
        //width: 200,
        /*strategy: { rows: DynamicStrategy,
         cols: DynamicStrategy},*/
        header: {
            getData: headerDataProvider,
            gridHeight: 100,
            gridWidth: 201,
            colsCount: 3,
            rowsCount: 4,
            colsBufferSize: 100
        },
        columnGroup: {
            getData: columnGroupDataProvider,
            gridHeight: 100,
            gridWidth: 500,
            colsCount: 4,
            rowsCount: 4,
            colsBufferSize: 5,
            visible: true
        },
        rowGroup: {
            getData: rowGroupDataProvider,
            gridHeight: 300,
            gridWidth: 201,
            colsCount: 3,
            rowsCount: 4,
            colsBufferSize: 3,
            visible: true
        },        
        data: {
            getData: dataProvider,
            gridHeight: 300,
            gridWidth: 500,
            colsCount: 5,
            rowsCount: 4,
            colsBufferSize: colsBufferSize,
            rowsBufferSize: rowsBufferSize
        }
    });
    crosstab.render();
    
    //crosstab.columnGroupGrid.show(true);
    
     // scrollable...