usky-oa
/
jnpf-web-datareport


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
							<!doctype html>
<html>
<head>
  <meta charset='utf-8'>
  <title>Column stretching - 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 stretching">
  <meta property="og:description"
    content="This page shows how to configure Handsontable column stretching.">
  <meta property="og:url" content="http://handsontable.com/demo/stretch.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.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">
              <h2>Column stretching</h2>

              <p>This page shows how to configure Handsontable column stretching:</p>

              <ul>
                <li><a href="#last">StretchH <code>last</code> column</a></li>
                <li><a href="#stretch">StretchH <code>all</code> columns</a></li>
                <li><a href="#none">StretchH <code>none</code> (default)</a></li>
              </ul>
            </div>
          </div>
        </div>

        <div class="rowLayout">
          <div class="descLayout">
            <div class="pad" data-jsfiddle="example2">
              <a name="last"></a>

              <h2>StretchH <code>last</code> column</h2>

              <p>The following example creates a table with vertical scrollbar by specifying
                only the container height and <code>overflow: hidden</code> in CSS.</p>

              <p>The last column is stretched using <code>stretchH: 'last'</code> option.</p>

              <div id="example2" style="height: 300px; overflow: hidden"></div>

              <p>
                <button name="dump" data-dump="#example2" data-instance="hot2" 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="example2">Edit in jsFiddle</button>
              </div>

              <script data-jsfiddle="example2">
                /**
                 * Container looks like this:
                 *
                 * <div id="example2" style="width: height: 300px; overflow: hidden"></div>
                 */
                var container2 = document.getElementById('example2'),
                    hot2;

                hot2 = new Handsontable(container2, {
                  data: Handsontable.helper.createSpreadsheetData(40, 6),
                  colWidths: [55, 47, 47, 47, 47, 47, 47], // can also be a number or a function
                  rowHeaders: true,
                  colHeaders: true,
                  stretchH: 'last',
                  minSpareRows: 1,
                  contextMenu: true
                });
              </script>
            </div>
          </div>
        </div>

        <div class="rowLayout">
          <div class="descLayout">
            <div class="pad" data-jsfiddle="example3">
              <a name="stretch"></a>

              <h2>StretchH <code>all</code> columns</h2>

              <p>If the table content is not as wide as the container width, the table will be stretched to the container
                width. The default horizontal stretch model is to stretch the last column only (by using <code>stretchH:
                  'last'</code> option).</p>

              <p>Other possible stretch modes are <code>all</code> (stretches all columns equally, used in the below example)
                and <code>none</code> (not stretching).</p>

              <div id="example3" style="height: 300px; overflow: hidden;"></div>

              <p>
                <button name="dump" data-dump="#example3" data-instance="hot3" 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="example3">Edit in jsFiddle</button>
              </div>

              <script data-jsfiddle="example3">
                /**
                 * Container looks like this:
                 *
                 * <div id="example3" style="width: height: 300px; overflow: hidden"></div>
                 */
                var container3 = document.getElementById('example3'),
                  hot3;

                hot3 = new Handsontable(container3, {
                  data: Handsontable.helper.createSpreadsheetData(40, 6),
                  colWidths: [55, 47, 47, 47, 47, 47, 47], // can also be a number or a function
                  rowHeaders: true,
                  colHeaders: true,
                  stretchH: 'all',
                  minSpareRows: 1,
                  contextMenu: true
                });
              </script>
            </div>
          </div>
        </div>

        <div class="rowLayout">
          <div class="descLayout">
            <div class="pad" data-jsfiddle="example4">
              <a name="none"></a>

              <h2>StretchH <code>none</code> (default)</h2>

              <div id="example4" style="height: 300px; overflow: hidden"></div>

              <p>
                <button name="dump" data-dump="#example4" data-instance="hot4" 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="example4">Edit in jsFiddle</button>
              </div>

              <script data-jsfiddle="example4">
                /**
                 * Container looks like this:
                 *
                 * <div id="example4" style="width: height: 300px; overflow: hidden"></div>
                 */
                var container4 = document.getElementById('example4'),
                  hot4;

                hot4 = new Handsontable(container4, {
                  data: Handsontable.helper.createSpreadsheetData(40, 6),
                  colWidths: [55, 47, 47, 47, 47, 47, 47], // can also be a number or a function
                  rowHeaders: true,
                  colHeaders: true,
                  stretchH: 'none', // actually you don't have to declare it because it is default
                  minSpareRows: 1,
                  contextMenu: true
                });
              </script>
            </div>
          </div>
        </div>

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

    </div>

  </div>
</div>

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

</body>
</html>