demo/datasources.html

<!doctype html>
<html xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset='utf-8'>
  <title>Array and object data sources - Handsontable</title>

  <!--
  Loading Handsontable (full distribution that includes all dependencies apart from jQuery)
  -->
  <script src="../lib/jquery.min.js"></script>
  <script src="../dist/jquery.handsontable.full.js"></script>
  <link 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 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="Array and object data sources">
  <meta property="og:description"
        content="This page shows how to use Handsontable with various data sources: array data source (also with hidden columns), object data source, nested object data source.">
  <meta property="og:url" content="http://handsontable.com/demo/reference.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/reference.html">

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

<body>
<a href="http://github.com/warpech/jquery-handsontable">
  <img style="position: absolute; top: 0; right: 0; border: 0;"
       src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="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>

      <h2>Array and object data sources</h2>

      <p>This page shows how to use Handsontable with various data sources:</p>

      <ul>
        <li><a href="#array">array data source</a></li>
        <li><a href="#array-hidden">array data source (with hidden columns)</a></li>
        <li><a href="#object">object data source</a></li>
        <li><a href="#nested">nested object data source (with column mapping)</a></li>
        <li><a href="#dataschema">automatic and custom data schema</a></li>
      </ul>

      <p>Please take note that Handsontable will change the original data source. More about this here: <a
          href="understanding_reference.html">Understanding binding as reference</a>.</p>
    </div>
  </div>
</div>

<div class="rowLayout">
  <div class="descLayout">
    <div class="pad">
      <a name="array"></a>

      <h2>Array data source</h2>

      <p>Most of the people use <strong>array of arrays</strong> data source with Handsontable.</p>

      <div id="example1"></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">Edit in jsFiddle</div>
      </div>

      <script>
        var data = [
          ["", "Kia", "Nissan", "Toyota", "Honda"],
          ["2008", 10, 11, 12, 13],
          ["2009", 20, 11, 14, 13],
          ["2010", 30, 15, 12, 13]
        ];

        var $container = $("#example1");
        $container.handsontable({
          data: data,
          startRows: 5,
          startCols: 5,
          colHeaders: true,
          minSpareRows: 1
        });
      </script>
    </div>
  </div>
</div>

<div class="rowLayout">
  <div class="descLayout">
    <div class="pad">
      <a name="array-hidden"></a>

      <h2>Array data source (with hidden columns)</h2>

      <p>Let's say, you want the same data source, but without the <b>Kia</b> column.</p>

      <div id="example2"></div>

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

      <script>
        var hiddenData = [
          ["", "Kia", "Nissan", "Toyota", "Honda"],
          ["2008", 10, 11, 12, 13],
          ["2009", 20, 11, 14, 13],
          ["2010", 30, 15, 12, 13]
        ];

        var $container = $("#example2");
        $container.handsontable({
          data: hiddenData,
          startRows: 5,
          startCols: 5,
          colHeaders: true,
          columns: [
            {data: 0},
            {data: 2},
            {data: 3},
            {data: 4}
          ],
          minSpareRows: 1
        });
      </script>
    </div>
  </div>
</div>

<div class="rowLayout">
  <div class="descLayout">
    <div class="pad">
      <a name="object"></a>

      <h2>Object data source</h2>

      <p>With version 0.7.0, comes possibility to use <strong>array of objects</strong> data source.</p>

      <div id="example3"></div>

      <p>
        <button name="dump" data-dump="#example3">Dump to console</button>
      </p>
    </div>
  </div>

  <div class="codeLayout">
    <div class="pad">
      <div class="jsFiddle">
        <div class="jsFiddleLink">Edit in jsFiddle</div>
      </div>

      <script>
        var objectData = [
          {id: 1, name: "Ted Right", address: ""},
          {id: 2, name: "Frank Honest", address: ""},
          {id: 3, name: "Joan Well", address: ""}
        ];

        var $container = $("#example3");
        $container.handsontable({
          data: objectData,
          startRows: 5,
          startCols: 3,
          colHeaders: true,
          minSpareRows: 1
        });
      </script>
    </div>
  </div>
</div>

<div class="rowLayout">
  <div class="descLayout">
    <div class="pad">
      <a name="nested"></a>

      <h2>Nested object data source (with column mapping)</h2>

      <p>Some people have nested objects. They can also be used at the data source with a little bit of column
        mapping.</p>

      <p>The mapping is done using the <b>columns</b> option.</p>

      <div id="example4"></div>

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

      <script>
        var nestedObjects = [
          {id: 1, name: {first: "Ted", last: "Right"}, address: ""},
          {id: 2, name: {first: "Frank", last: "Honest"}, address: ""},
          {id: 3, name: {first: "Joan", last: "Well"}, address: ""}
        ];

        var $container = $("#example4");
        $container.handsontable({
          data: nestedObjects,
          startRows: 5,
          startCols: 4,
          colHeaders: true,
          columns: [
            {data: "id"},
            {data: "name.first"},
            {data: "name.last"},
            {data: "address"}
          ],
          minSpareRows: 1
        });
      </script>
    </div>
  </div>
</div>

<div class="rowLayout">
  <div class="descLayout">
    <div class="pad">
      <a name="dataschema"></a>

      <h2>Automatic and custom data schema</h2>

      <p>When you use object data binding, Handsontable needs to know the data structure to create when you add a new
        row.</p>

      <p>If your data source contains at least one row, Handsontable will figure out the data structure based on the
        first row.</p>

      <p>In case you want to start with an empty data source, you will need to provide the <strong>dataSchema</strong>
        option that contains the data structure for any new row added to the grid.</p>

      <p>The below example shows custom data schema with an empty data source:</p>

      <div id="example5"></div>

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

      <script>
        var $container = $("#example5");
        $container.handsontable({
          data: [],
          dataSchema: {id: null, name: {first: null, last: null}, address: null},
          startRows: 5,
          startCols: 4,
          colHeaders: ['ID', 'First Name', 'Last Name', 'Address'],
          columns: [
            {data: "id"},
            {data: "name.first"},
            {data: "name.last"},
            {data: "address"}
          ],
          minSpareRows: 1
        });
      </script>
    </div>
  </div>
</div>

<div class="rowLayout">
  <div class="descLayout noMargin">
    <div class="pad"><p>For more examples, head back to the <a href="../index.html">main page</a>.</p>

      <p class="small">Handsontable &copy; 2012 Marcin Warpechowski and contributors.<br> Code and documentation
        licensed under the The MIT License.</p>
    </div>
  </div>
</div>
</div>
</div>
</body>
</html>