usky-oa
/
jnpf-web-datareport


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
							<!doctype html>
<html>
<head>
  <meta charset='utf-8'>
  <title>Native Scrollbar (window) - 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/zeroclipboard/ZeroClipboard.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="Native Scrollbar (window)">
  <meta property="og:description"
        content="This demo shows table of 1000 rows and columns. Only visible part is rendered. Native window scrollbar is used to
            scroll through the table.">
  <meta property="og:url" content="http://handsontable.com/demo/scroll_window.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_window.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>Native Scrollbar (window)</h2>

          <p>This demo shows table of <strong>300</strong> rows and columns. Only visible part is rendered. Native window scrollbar is used to
            scroll through the table.</p>

          <div id="example1"></div>

          <p>This paragraph exists to present that there may be additional content below the table. This paragraph exists to present that there may be additional content below the table. This paragraph exists to present that there may be additional content below the table. This paragraph exists to present that there may be additional content below the table. This paragraph exists to present that there may be additional content below the table. This paragraph exists to present that there may be additional content below the table. This paragraph exists to present that there may be additional content below the table. This paragraph exists to present that there may be additional content below the table.</p>

          <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 container1 = document.getElementById('example1'),
              hot1;

            hot1 = new Handsontable(container1, {
              data: Handsontable.helper.createSpreadsheetData(300, 300),
              colWidths: [55, 47, 47, 47, 47, 47], // can also be a number or a function
              rowHeaders: true,
              colHeaders: true,
              minSpareRows: 1,
              contextMenu: true,
              fixedRowsTop: 2,
              fixedColumnsLeft: 2
            });
          </script>
        </div>
      </div>
    </div>

        <div class="footer-text">
        </div>
      </div>

    </div>

  </div>
</div>

<div id="outside-links-wrapper"></div>

</body>
</html>