console
var GridLayout = window.ReactGridLayout
var WidthProvider = GridLayout.WidthProvider
const ReactGridLayout = WidthProvider(GridLayout);
var App = React.createClass({
render() {
return (
<ReactGridLayout rowHeight={30}>
<div key="1" data-grid={{ x: 0, y: 0, w: 2, h: 3 }}>
<span className="text">1</span>
</div>
<div key="2" data-grid={{ x: 2, y: 0, w: 4, h: 3, static: true }}>
<span className="text">2 - Static</span>
</div>
<div key="3" data-grid={{ x: 6, y: 0, w: 2, h: 3 }}>
<span className="text">3</span>
</div>
</ReactGridLayout>
)
}
})
ReactDOM.render(<App/>, document.getElementById('root'))
<div id='root'></div>
body {
background: white;
padding: 20px;
overflow: scroll;
}
.react-grid-layout {
background: #eee;
}
.react-grid-item:not(.react-grid-placeholder) {
background: #ccc;
border: 1px solid black;
}
.react-grid-item.static {
background: #cce;
}