"denamique react"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/simoberny/pen/bqwewq?depth=everything&order=popularity&page=26&q=react&show_forks=false" /> <style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500"); * { margin: 0; padding: 0; box-sizing: border-box; } html, body { background: #f1f1f1; font-family: "Roboto"; } .container { width: 900px; overflow: auto; background: white; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.1); padding: 20px; margin: 30px; border-radius: 5px; } .container h1 { font-weight: 300; } .container table { margin-top: 20px; border-collapse: collapse; /*tr:last-child{ background-color: rgba(204, 235, 255,0.5); }*/ } .container table .totalTR { text-align: center; font-size: 20px; padding: 7px; } .container table .totalTr { background: rgba(0, 0, 0, 0.15) !important; font-size: 18px; } .container table .totalTr .totalText { padding-left: 10px; } .container table th { font-weight: 400; font-size: 17px; background-color: #ff5544; padding: 15px; } .container table th, .container table td { text-align: left; } .container table tr:nth-child(even) { background-color: #f2f2f2; } .container table td { padding: 5px; } .container table td input { border: none; background: transparent; font-size: 15px; padding: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .container table td input:focus { outline: none; border-bottom: 1px solid #33adff; } .container table .total { text-align: center; font-weight: 500; } .container button { margin-top: 20px; width: 40px; height: 40px; border: none; border-radius: 50%; color: white; font-size: 21px; font-weight: 400; text-align: center; cursor: pointer; background: #ff5544; line-height: 40px; box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.3); -webkit-transition: all 0.3s; transition: all 0.3s; margin-right: 20px; } .container button:hover { box-shadow: 0 10px 25px -7px rgba(0, 0, 0, 0.4); -webkit-transform: translatey(-3px); transform: translatey(-3px); -webkit-transition: all 0.3s; transition: all 0.3s; } .container button:focus { outline: none; } </style></head><body> /* NOTHING HERE */ <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script><script src='//cdn.bootcss.com/mobx/2.4.3/mobx.umd.min.js'></script><script src='https://npmcdn.com/mobx-react@3.5.5/index.js'></script> <script >"use strict"; var totalVec = new Array(); function Header() { return React.createElement( "h1", null, "Dynamic Table - React" ); } var ListItem = React.createClass({ displayName: "ListItem", getInitialState: function getInitialState() { return { name: this.props.value.product.name, costo: this.props.value.product.costo, quantita: this.props.value.product.quantita, totale: 0 }; }, render: function render() { return React.createElement( "tr", null, React.createElement( "td", null, React.createElement("input", { type: "text", name: "name", value: this.state.name, onChange: this.handleChange, placeholder: "Nome..." }) ), React.createElement( "td", null, React.createElement("input", { type: "text", name: "costo", value: this.state.costo, onChange: this.handleChange, placeholder: "Costo unitario..." }) ), React.createElement( "td", null, React.createElement("input", { type: "text", name: "quantita", value: this.state.quantita, onChange: this.handleChange, placeholder: "Quantità..." }) ), React.createElement( "td", { className: "total" }, this.state.totale ) ); }, handleChange: function handleChange(event) { var _setState; var target = event.target; var name = target.name; var value = target.value; this.setState((_setState = {}, _setState[name] = value, _setState), this.calcoloTotale); }, componentDidMount: function componentDidMount() { this.setState({ totale: this.state.costo * this.state.quantita }, function () { totalVec[this.props.value.id] = this.state.totale;this.props.updateGlobalTotal(); }); }, calcoloTotale: function calcoloTotale() { var Ltotale = this.state.costo * this.state.quantita; totalVec[this.props.value.id] = Ltotale; this.setState({ totale: Ltotale }, function () { this.props.updateGlobalTotal(); }); } }); var Table = React.createClass({ displayName: "Table", getInitialState: function getInitialState() { return { totale: 0 }; }, render: function render() { var _this = this; return React.createElement( "div", null, React.createElement( "table", null, React.createElement( "tr", null, React.createElement( "th", null, "Name" ), React.createElement( "th", null, "Price" ), React.createElement( "th", null, "Quantity" ), React.createElement( "th", null, "Total" ) ), this.props.items.map(function (prodotto) { return React.createElement(ListItem, { key: prodotto.id, value: prodotto, updateGlobalTotal: _this.updateGlobalTotal }); }), React.createElement( "tr", { className: "totalTr" }, React.createElement( "td", { className: "totalText" }, "Total:" ), React.createElement("td", null), React.createElement("td", null), React.createElement( "td", { className: "totalTR" }, this.state.totale ) ) ) ); }, updateGlobalTotal: function updateGlobalTotal() { var total = 0; for (var i = 0; i < this.props.ids; i++) {if (window.CP.shouldStopExecution(1)){break;} total += totalVec[i]; } window.CP.exitedLoop(1); this.setState({ totale: total }); } }); var AddNewRow = React.createClass({ displayName: "AddNewRow", render: function render() { return React.createElement( "div", null, React.createElement( "button", { onClick: this.props.onClick }, "+" ), "Add Product" ); } }); var Calculator = React.createClass({ displayName: "Calculator", getInitialState: function getInitialState() { return { counter: 2, lists: [{ id: "0", product: { name: "Example 1", costo: "25", quantita: "3" } }, { id: "1", product: { name: "Example 2", costo: "32", quantita: "4" } }] }; }, render: function render() { return React.createElement( "div", { className: "container" }, React.createElement(Header, null), React.createElement(Table, { items: this.state.lists, ids: this.state.counter }), React.createElement(AddNewRow, { onClick: this.addRow }) ); }, addRow: function addRow() { this.setState({ counter: this.state.counter + 1 }); var listItem = { id: this.state.counter, product: { name: "", costo: "", quantita: "" } }; var allItem = this.state.lists.concat([listItem]); this.setState({ lists: allItem }); } }); ReactDOM.render(React.createElement(Calculator, null), document.body); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: