react-virtualized
Version:
React components for efficiently rendering large, scrollable lists and tabular data
80 lines (73 loc) • 1.83 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>foo</title>
<style type="text/css">
body, html, #mount {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.cell {
display: flex;
flex-direction: row;
}
.button,
.input,
.image {
width: 100%;
height: 100%;
}
.button {
appearance: none;
border: none;
background-color: #DDD;
border-radius: 4px;
display: flex;
align-content: center;
}
.input {
box-sizing: border-box;
}
.image {
height: auto;
width: 100%;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
</head>
<body>
<div id="mount"></div>
<script>
var matches = window.location.search.match('source=(.+)');
var baseDir = '../';
if (matches) {
baseDir = matches[1] === 'remote'
? 'https://rawgit.com/bvaughn/react-virtualized/master/'
: matches[1]
}
function loadStyle (source, callback) {
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('href', source);
link.onload = callback
document.head.appendChild(link);
}
function loadScript (source) {
var script = document.createElement('script');
script.setAttribute('src', source);
script.async = false;
document.head.appendChild(script);
}
var styleSource = baseDir + 'styles.css';
var scriptSource = baseDir + 'dist/umd/react-virtualized.js';
loadStyle(styleSource, function() {
loadScript(scriptSource);
loadScript('grid.js');
});
</script>
</body>
</html>