<commit_before><!doctype html>
<html>
<head>
  <meta charset='utf-8'>
  <title>Fixed Rows &amp; Columns - Handsontable</title>

  <!--
  Loading Handsontable (full distribution that includes all dependencies apart from jQuery)
  -->
  <script data-jsfiddle="common" src="../lib/jquery.min.js"></script>
  <script data-jsfiddle="common" src="../dist/jquery.handsontable.full.js"></script>
  <link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/jquery.handsontable.full.css">

  <!--
  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">
  <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">

  <!--
  Facebook open graph. Don't copy this to your project :)
  -->
  <meta property="og:title" content="Fixed Rows &amp; Columns">
  <meta property="og:description"
        content="This page shows how to configure Handsontable fixed rows/columns">
  <meta property="og:url" content="http://handsontable.com/demo/fixed.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/fixed.html">

  <!--
  Google Analytics for GitHub Page. Don't copy this to your project :)
  -->
  <script src="js/ga.js"></script>

  <script data-jsfiddle="common">
    function createBigData() {
      var rows = []
        , i
        , j;

      for (i = 0; i < 100000; i++) {
        var row = [];
        for (j = 0; j < 10; j++) {
          row.push(Handsontable.helper.spreadsheetColumnLabel(j) + i);
        }
        rows.push(row);
      }

      return rows;
    }
  </script>
</head>

<body>
<a href="http://github.com/warpech/jquery-handsontable" class="forkMeOnGitHub">Fork me on GitHub</a>

<div id="container">
  <div class="columnLayout">

    <div class="rowLayout">
      <div class="descLayout">
        <div class="pad">
          <h1><a href="../index.html">Handsontable</a></h1>

          <div class="tagline">a minimalistic Excel-like <span class="nobreak">data grid</span> editor
            for HTML, JavaScript &amp; jQuery
          </div>
        </div>
      </div>
    </div>

    <div class="rowLayout">
      <div class="descLayout">
        <div class="pad" data-jsfiddle="example1">
          <h2>Fixed rows and columns</h2>

          <p>Specify two fixed rows with <code>fixedRowsTop: 2</code> and two fixed columns with <code>fixedColumnsLeft:
            2</code> option.</p>

          <p>Note: You'll need horizontal scrollbars, so just set a container <code>width</code> and <code>overflow:
            scroll</code> in CSS.</p>

          <pre id="positions"></pre>

          <div id="example1" style="width: 400px; height: 300px; overflow: scroll"></div>

          <p>
            <button name="dump" data-dump="#example1" 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">
            <div class="jsFiddleLink" data-runfiddle="example1">Edit in jsFiddle</div>
          </div>

          <script data-jsfiddle="example1">
            /*
             Container looks like this:

             <div id="example1" style="width: 400px; height: 300px; overflow: scroll"></div>
             */

            var myData = createBigData();

            $("#example1").handsontable({
              data: myData,<commit_msg>use `createSpreadsheetData` function in the demo<commit_after><!doctype html>
<html>
<head>
  <meta charset='utf-8'>
  <title>Fixed Rows &amp; Columns - Handsontable</title>

  <!--
  Loading Handsontable (full distribution that includes all dependencies apart from jQuery)
  -->
  <script data-jsfiddle="common" src="../lib/jquery.min.js"></script>
  <script data-jsfiddle="common" src="../dist/jquery.handsontable.full.js"></script>
  <link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/jquery.handsontable.full.css">

  <!--
  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">
  <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">

  <!--
  Facebook open graph. Don't copy this to your project :)
  -->
  <meta property="og:title" content="Fixed Rows &amp; Columns">
  <meta property="og:description"
        content="This page shows how to configure Handsontable fixed rows/columns">
  <meta property="og:url" content="http://handsontable.com/demo/fixed.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/fixed.html">

  <!--
  Google Analytics for GitHub Page. Don't copy this to your project :)
  -->
  <script src="js/ga.js"></script>

  <script data-jsfiddle="common">
    function createSpreadsheetData(rowCount, colCount) {
      rowCount = typeof rowCount === 'number' ? rowCount : 100;
      colCount = typeof colCount === 'number' ? colCount : 4;

      var rows = []
        , i
        , j;

      for (i = 0; i < rowCount; i++) {
        var row = [];
        for (j = 0; j < colCount; j++) {
          row.push(Handsontable.helper.spreadsheetColumnLabel(j) + i);
        }
        rows.push(row);
      }
      return rows;
    }
  </script>
</head>

<body>
<a href="http://github.com/warpech/jquery-handsontable" class="forkMeOnGitHub">Fork me on GitHub</a>

<div id="container">
  <div class="columnLayout">

    <div class="rowLayout">
      <div class="descLayout">
        <div class="pad">
          <h1><a href="../index.html">Handsontable</a></h1>

          <div class="tagline">a minimalistic Excel-like <span class="nobreak">data grid</span> editor
            for HTML, JavaScript &amp; jQuery
          </div>
        </div>
      </div>
    </div>

    <div class="rowLayout">
      <div class="descLayout">
        <div class="pad" data-jsfiddle="example1">
          <h2>Fixed rows and columns</h2>

          <p>Specify two fixed rows with <code>fixedRowsTop: 2</code> and two fixed columns with <code>fixedColumnsLeft:
            2</code> option.</p>

          <p>Note: You'll need horizontal scrollbars, so just set a container <code>width</code> and <code>overflow:
            scroll</code> in CSS.</p>

          <pre id="positions"></pre>

          <div id="example1" style="width: 400px; height: 300px; overflow: scroll"></div>

          <p>
            <button name="dump" data-dump="#example1" 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">
            <div class="jsFiddleLink" data-runfiddle="example1">Edit in jsFiddle</div>
          </div>

          <script data-jsfiddle="example1">
            /*
             Container looks like this:

             <div id="example1" style="width: 400px; height: 300px; overflow: scroll"></div>
             */

            var myData = createSpreadsheetData(1000, 1000);

            $("#example1").handsontable({
              data: myData,
{'fraction_non_alphanumeric': 0.1601311310049174, 'fraction_numerical': 0.011095700416088766, 'mean_word_length': 2.780743565300286, 'pattern_counts': {'":': 0, '<': 185, '<?xml version=': 0, '>': 181, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4689994', 'n_tokens_mistral': 2559, 'n_tokens_neox': 2377, 'n_words': 592}