React-grid-layout: Nested Grid System

Created on 28 Oct 2016 · 3Comments · Source: STRML/react-grid-layout

Hey guys,,
I am trying to _plugin in nested grid system in a parent grid system_ !!
but the child grid system doesn't automatically inherit the parent width and height !!
can someone help ??

below is the naive code I am practicing right now
using material-ui & react-grid-layout

var WidthProvider = require('react-grid-layout').WidthProvider;
ReactGridLayout = WidthProvider(ReactGridLayout);
RGLC = WidthProvider(RGLC);

import '../node_modules/react-grid-layout/css/styles.css'
import '../node_modules/react-resizable/css/styles.css'

const styles = {
header : {
display:'flex',
flexDirection:'row',
justifyContent:'flex-start',
alignItems:'center',
paddingLeft:10,
backgroundColor:'#00897B',

headingContainer: {
display:'flex',
flexDirection:'column',
justifyContent:'flex-start',
alignItems:'flex-start'
},

textContainer : {
display:'flex',
flexDirection:'row',
alignItems:'stretch'
}
}

export default class App extends Component {

render() {

var layout = [
  {i : 'a', x: 0, y: 0, w: 30, h:2.4,static:true},
  {i : 'b', x: 7.5, y: 7.5, w: 15, h:15,static:true},
  {i : 'x1', x: 0, y: 0, w: 10, h:30,static:true}
];



console.log(WidthProvider(ReactGridLayout))
return (
  <MultiThemeProvider>
    <ReactGridLayout className="layout" layout={layout} cols={30} rowHeight={30} margin={[0,0]} onLayoutChange={(obj) => console.log(obj)}>

      <Paper key={'a'} style={styles.header} zDepth='4'>
        <div style={styles.headingContainer}>
          <h3 style={{marginTop:10,marginBottom:0,marginLeft:0,marginRight:0,display:'flex',fontWeight:100,letterSpacing:2,fontSize:28,color:'white',fontFamily:'skia'}}> Victor Choudhary </h3>
          <h4 style={{marginTop:3,paddingbottom:50,marginBottom:3,marginLeft:5,marginRight:0,display:'flex',fontWeight:100,letterSpacing:2,fontSize:16,color:'#D7CCC8',fontFamily:'tahoma'}}> full stack dev </h4>

        </div>
      </Paper>

      <Paper key={'b'}  zDepth='2' style={{overflow:'scroll'}}>
      <RGLC className="layout_2" cols={15} rowHeight={15} margin={[5,5]} onLayoutChange={(obj) => console.log(obj)}>
          <div key={'c'} data-grid={{x: 0, y: 0, w: 15, h:15, static:true}} style={{backgroundColor:'blue'}}>
            hello this si fsdflksdflskdjf lskdjf
          </div>
      </RGLC>
      </Paper>


    </ReactGridLayout>
  </MultiThemeProvider>
);

}

Source