JSFiddle - React, Tailwind, and code Playground

by psoares

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojox/grid/resources/claroGrid.css">
<body class="claro">
<div id="appLayout" class="demoLayout" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:true, liveSplitters:true">
        <div id="grid1">
        </div>

        <div id="grid2">
        </div>
</div>

</body>

CSS

body,html {
    margin: 0;
    overflow:hidden;
}
.demoLayout, body, html{
    width : 100%;
    height : 100%;
}

#grid1, #grid2 {
height : 50%;        
}
#grid2 {
position : relative;
bottom : 0;    
}

JavaScript

require(["dijit/layout/BorderContainer",
         "dijit/layout/ContentPane",
         "dojox/grid/DataGrid",
         "dojo/data/ItemFileWriteStore"
        ],function(){
    var data = {
      identifier: 'id',
      items: []
    };
    var data_list = [
      { col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
      { col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
      { col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
    ];
    var rows = 5;
    for(var i=0, l=data_list.length; i<rows; i++){
      data.items.push(dojo.mixin({ id: i+1 }, data_list[i%l]));
    }
    var store = new dojo.data.ItemFileWriteStore({data: data});

    /*set up layout*/
    var layout = [[
      {'name': 'Column 1', 'field': 'id', 'width': '100px'},
      {'name': 'Column 2', 'field': 'col2', 'width': '100px'},
      {'name': 'Column 3', 'field': 'col3', 'width': '200px'},
              {'name': 'Column 4', 'field': 'col4', 'width': '150px'}
    ]];

    /*create a new grid:*/
    var grid1 = new dojox.grid.DataGrid({
        id: 'grid1',
        store: store,
        structure: layout,
        region : 'center',
        splitter:true,
        rowSelector: '20px'},
        'grid1');

    var grid2 = new dojox.grid.DataGrid({
        id: 'grid2',
        store: store,
        structure: layout,
        region : 'bottom',
        splitter:true,
        rowSelector: '20px'          
    },
        'grid2');
            
    /*Call startup() to render the grid*/
    grid1.startup();
    grid2.startup();
});