Created
September 3, 2018 22:37
-
-
Save carlo-colombo/65c9fe338af1167923acf069cf36ded1 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/givopef
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" type="text/css" /> | |
| </head> | |
| <body> | |
| <script src="https://fb.me/react-15.1.0.js"></script> | |
| <script src="https://fb.me/react-dom-15.1.0.js"></script> | |
| <script id="jsbin-javascript"> | |
| function Turns(){ | |
| return React.createElement("div", {className: "column"}, | |
| React.createElement("table", {className: "table is-striped is-bordered is-fullwidth"}, | |
| React.createElement("thead", null, | |
| React.createElement("tr", null, | |
| React.createElement("th", null), | |
| 'SMLH'.split('').map(c => { | |
| return React.createElement("th", {key: c}, c) | |
| }) | |
| ) | |
| ), | |
| React.createElement("tbody", null, | |
| new Array(12).fill().map((v,i)=>{ | |
| return React.createElement("tr", {key: i}, | |
| React.createElement("td", null, i+1), | |
| React.createElement("td", null), | |
| React.createElement("td", null), | |
| React.createElement("td", null), | |
| React.createElement("td", null) | |
| ) | |
| }) | |
| ) | |
| ) | |
| ) | |
| } | |
| const Contracts = Tools = Investments = function({children}){ | |
| return React.createElement("div", null, children) | |
| } | |
| function Contract({name}){ | |
| return React.createElement("div", null, name) | |
| } | |
| function Sheet(){ | |
| return React.createElement("div", {className: "columns is-mobile"}, | |
| React.createElement(Turns, null), | |
| React.createElement("div", {className: "column"}, | |
| React.createElement(Contracts, null, | |
| React.createElement(Contract, {name: "asd"}) | |
| ), | |
| React.createElement(Tools, null), | |
| React.createElement(Investments, null) | |
| ) | |
| ) | |
| } | |
| ReactDOM.render( | |
| React.createElement(Sheet, null), | |
| document.body | |
| ) | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">function Turns(){ | |
| return <div className="column"> | |
| <table className="table is-striped is-bordered is-fullwidth"> | |
| <thead> | |
| <tr> | |
| <th></th> | |
| {'SMLH'.split('').map(c => { | |
| return <th key={c}>{c}</th> | |
| })} | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {new Array(12).fill().map((v,i)=>{ | |
| return <tr key={i}> | |
| <td>{i+1}</td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| </tr> | |
| })} | |
| </tbody> | |
| </table> | |
| </div> | |
| } | |
| const Contracts = Tools = Investments = function({children}){ | |
| return <div>{children}</div> | |
| } | |
| function Contract({name}){ | |
| return <div>{name}</div> | |
| } | |
| function Sheet(){ | |
| return <div className="columns is-mobile"> | |
| <Turns/> | |
| <div className="column"> | |
| <Contracts > | |
| <Contract name="asd"/> | |
| </Contracts> | |
| <Tools /> | |
| <Investments /> | |
| </div> | |
| </div> | |
| } | |
| ReactDOM.render( | |
| <Sheet />, | |
| document.body | |
| )</script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function Turns(){ | |
| return React.createElement("div", {className: "column"}, | |
| React.createElement("table", {className: "table is-striped is-bordered is-fullwidth"}, | |
| React.createElement("thead", null, | |
| React.createElement("tr", null, | |
| React.createElement("th", null), | |
| 'SMLH'.split('').map(c => { | |
| return React.createElement("th", {key: c}, c) | |
| }) | |
| ) | |
| ), | |
| React.createElement("tbody", null, | |
| new Array(12).fill().map((v,i)=>{ | |
| return React.createElement("tr", {key: i}, | |
| React.createElement("td", null, i+1), | |
| React.createElement("td", null), | |
| React.createElement("td", null), | |
| React.createElement("td", null), | |
| React.createElement("td", null) | |
| ) | |
| }) | |
| ) | |
| ) | |
| ) | |
| } | |
| const Contracts = Tools = Investments = function({children}){ | |
| return React.createElement("div", null, children) | |
| } | |
| function Contract({name}){ | |
| return React.createElement("div", null, name) | |
| } | |
| function Sheet(){ | |
| return React.createElement("div", {className: "columns is-mobile"}, | |
| React.createElement(Turns, null), | |
| React.createElement("div", {className: "column"}, | |
| React.createElement(Contracts, null, | |
| React.createElement(Contract, {name: "asd"}) | |
| ), | |
| React.createElement(Tools, null), | |
| React.createElement(Investments, null) | |
| ) | |
| ) | |
| } | |
| ReactDOM.render( | |
| React.createElement(Sheet, null), | |
| document.body | |
| ) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment