usky-oa
/
jnpf-web-datareport


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
							<!doctype html>
<html>
<head>
  <meta charset='utf-8'>
  <title>Column stretch (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="Column stretch (window)">
  <meta property="og:description"
        content="This demo shows table of 1000 rows and 6 columns (stretched to the container width of 700px). Only visible part is rendered. Native window scrollbar is used to
            scroll through the table.">
  <meta property="og:url" content="http://handsontable.com/demo/stretch_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/stretch_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>Column stretch (window)</h2>

          <p>This demo shows table of 1000 rows and 6 columns (stretched to the container width of 700px). Only visible part is rendered. Native window scrollbar is used to
            scroll through the table.</p>

          <div id="example1" style="width: 700px"></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 example1 = document.getElementById('example1'),
              hot1;

            hot1 = new Handsontable(example1, {
              data: Handsontable.helper.createSpreadsheetData(1000, 6),
              colWidths: [55, 47, 47, 47, 47, 47], // can also be a number or a function
              rowHeaders: true,
              colHeaders: true,
              minSpareRows: 1,
              stretchH: 'all',
              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>