@reactual/handsontable
Version:
Spreadsheet-like data grid editor
154 lines (125 loc) • 4.86 kB
HTML
<html>
<head>
<meta charset='utf-8'>
<title>Scroll - Handsontable</title>
<!--
Loading Handsontable (full distribution that includes all dependencies)
-->
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/handsontable.css">
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/pikaday/pikaday.css">
<script data-jsfiddle="common" src="../dist/pikaday/pikaday.js"></script>
<script data-jsfiddle="common" src="../dist/moment/moment.js"></script>
<script data-jsfiddle="common" src="../dist/numbro/numbro.js"></script>
<script data-jsfiddle="common" src="../dist/numbro/languages.js"></script>
<script data-jsfiddle="common" src="../dist/handsontable.js"></script>
<!--
Loading demo dependencies. They are used here only to enhance the examples on this page
-->
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="css/samples.css?20140331">
<script src="js/samples.js"></script>
<script src="js/highlight/highlight.pack.js"></script>
<link rel="stylesheet" media="screen" href="js/highlight/styles/github.css">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
<!--
Facebook open graph. Don't copy this to your project :)
-->
<meta property="og:title" content="Scroll">
<meta property="og:description"
content="If you want scrollbars, just set it in the container CSS.">
<meta property="og:url" content="http://handsontable.com/demo/scroll.html">
<meta property="og:image" content="http://handsontable.com/demo/image/og-image.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="409">
<meta property="og:image:height" content="164">
<link rel="canonical" href="http://handsontable.com/demo/scroll.html">
<!--
Google Analytics for GitHub Page. Don't copy this to your project :)
-->
<script src="js/ga.js"></script>
</head>
<body>
<div class="wrapper">
<div class="wrapper-row">
<div id="global-menu-clone">
<h1><a href="../index.html">Handsontable</a></h1>
</div>
<div id="container">
<div class="columnLayout">
<div class="rowLayout">
<div class="descLayout">
<div class="pad" data-jsfiddle="example1">
<h2>Vertical and horizontal scrollbars</h2>
<p>If you want scrollbars, just set container width, height and <code>overflow: scroll</code> in CSS.</p>
<p>This demo shows table of <strong>1000</strong> rows and columns. Only visible part is rendered. Native div scrollbar is used to
scroll through the table.</p>
<p>
<button class="maximize">Maximize HOT table</button>
</p>
<div id="example1" style="width: 400px; height: 200px; overflow: hidden"></div>
<p>
<button name="dump" data-dump="#example1" data-instance="hot1" title="Prints current data source to Firebug/Chrome Dev Tools">Dump
data to console
</button>
</p>
</div>
</div>
<div class="codeLayout">
<div class="pad">
<div class="jsFiddle">
<button class="jsFiddleLink" data-runfiddle="example1">Edit in jsFiddle</button>
</div>
<script data-jsfiddle="example1">
var
example = document.getElementById('example1'),
maximize = document.querySelector('.maximize'),
maxed = false,
resizeTimeout,
availableWidth,
availableHeight,
hot1;
hot1 = new Handsontable(example,{
data: Handsontable.helper.createSpreadsheetData(1000, 1000),
colWidths: [55, 80, 80, 80, 80, 80, 80], //can also be a number or a function
rowHeaders: true,
colHeaders: true,
fixedColumnsLeft: 2,
fixedRowsTop: 2,
minSpareRows: 1,
contextMenu: true
});
function calculateSize() {
var offset;
if (maxed) {
offset = Handsontable.dom.offset(example);
availableWidth = Handsontable.dom.innerWidth(document.body) - offset.left + window.scrollX;
availableHeight = Handsontable.dom.innerHeight(document.body) - offset.top + window.scrollY;
example.style.width = availableWidth + 'px';
example.style.height = availableHeight + 'px';
}
}
Handsontable.dom.addEvent(window, 'resize', calculateSize);
Handsontable.dom.addEvent(maximize, 'click', function() {
maxed = !maxed;
if (maxed) {
calculateSize();
}
else {
example.style.width = 400 + 'px';
example.style.height = 400 + 'px';
}
hot1.render();
});
</script>
</div>
</div>
</div>
<div class="footer-text">
</div>
</div>
</div>
</div>
</div>
<div id="outside-links-wrapper"></div>
</body>
</html>