daaain/prototype.html

## prototype.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation-flex.css">
    <script src="https://fb.me/react-with-addons-15.3.0.js" type="text/javascript"></script>
    <script src="https://fb.me/react-dom-15.3.0.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js" type="text/javascript"></script>
    <script src="https://cdn.rawgit.com/chriszarate/sheetrock/master/dist/sheetrock.min.js"></script>
  </head>
  <body>
    <script type="text/babel">
      let HelloTable = (props) => {
        let mappable = (component) => {
          return (x, i) => {
            return component({key: i}, x);
          }
        };
        let td = mappable(React.DOM.td);
        let tr = mappable(React.DOM.tr);
        let th = mappable(React.DOM.th);
        let renderTableBody = (tableData) => {
          return tableData.map((row, i, arr) => {
            if(i > 0) return tr(row.cellsArray.map(td), i, arr);
          });
        };
        return (
          <div>
            <table className="stack hover">
              <thead>
                <tr>{props.sheetsData.rows[0].cellsArray.map(th)}</tr>
              </thead>
              <tbody>{renderTableBody(props.sheetsData.rows)}</tbody>
            </table>
          </div>
        );
      };
      function handleSpreadsheetData(error, options, response) {
        console.log('Sheetrock', 'error', error, 'options', options, 'response', response);
        ReactDOM.render(
          <HelloTable sheetsData={response} />,
          document.getElementById('proto')
        );
      }
      window.loadSpreadsheetData = () => {
        sheetrock({
          url: 'https://docs.google.com/spreadsheets/d/1Gn50ovdLMMv_uoMevojl46BZbliaLolgZDtHD1FIpOs/edit#gid=0',
          callback: handleSpreadsheetData
        });
      }
    </script>
    <h1>Prototyping awesomeness</h1>
    <button class="button" type="button" onclick="loadSpreadsheetData();">Load spreadsheet data</button>
    <div id="proto"></div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Prototype</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation-flex.css">
	<script src="https://fb.me/react-with-addons-15.3.0.js" type="text/javascript"></script>
	<script src="https://fb.me/react-dom-15.3.0.js" type="text/javascript"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js" type="text/javascript"></script>
	<script src="https://cdn.rawgit.com/chriszarate/sheetrock/master/dist/sheetrock.min.js"></script>
	</head>
	<body>
	<script type="text/babel">
	let HelloTable = (props) => {
	let mappable = (component) => {
	return (x, i) => {
	return component({key: i}, x);
	}
	};
	let td = mappable(React.DOM.td);
	let tr = mappable(React.DOM.tr);
	let th = mappable(React.DOM.th);
	let renderTableBody = (tableData) => {
	return tableData.map((row, i, arr) => {
	if(i > 0) return tr(row.cellsArray.map(td), i, arr);
	});
	};
	return (
	<div>
	<table className="stack hover">
	<thead>
	<tr>{props.sheetsData.rows[0].cellsArray.map(th)}</tr>
	</thead>
	<tbody>{renderTableBody(props.sheetsData.rows)}</tbody>
	</table>
	</div>
	);
	};
	function handleSpreadsheetData(error, options, response) {
	console.log('Sheetrock', 'error', error, 'options', options, 'response', response);
	ReactDOM.render(
	<HelloTable sheetsData={response} />,
	document.getElementById('proto')
	);
	}
	window.loadSpreadsheetData = () => {
	sheetrock({
	url: 'https://docs.google.com/spreadsheets/d/1Gn50ovdLMMv_uoMevojl46BZbliaLolgZDtHD1FIpOs/edit#gid=0',
	callback: handleSpreadsheetData
	});
	}
	</script>
	<h1>Prototyping awesomeness</h1>
	<button class="button" type="button" onclick="loadSpreadsheetData();">Load spreadsheet data</button>
	<div id="proto"></div>
	</body>
	</html>