@reactual/handsontable
Version:
Spreadsheet-like data grid editor
450 lines (372 loc) • 16 kB
HTML
<html xmlns="http://www.w3.org/1999/html">
<head>
<meta charset='utf-8'>
<title>Array, object and function data sources - 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/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="Array, object and function">
<meta property="og:description"
content="This page shows how to use Handsontable with various data sources: array, object and function.">
<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>
<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>Array, object and function 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">object data source (nested, with column mapping)</a></li>
<li><a href="#dataschema">object data source (custom data schema)</a></li>
<li><a href="#propertyschema">function data source and schema (to reach where arrays and objects can't
reach)</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" data-jsfiddle="example1">
<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" 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" data-instance="hot1">Edit in jsFiddle</button>
</div>
<script data-jsfiddle="example1">
var
data = [
['', 'Kia', 'Nissan', 'Toyota', 'Honda'],
['2008', 10, 11, 12, 13],
['2009', 20, 11, 14, 13],
['2009', 30, 15, 12, 13]
],
container1 = document.getElementById('example1'),
hot1;
hot1 = new Handsontable(container1, {
data: data,
startRows: 5,
startCols: 5,
colHeaders: true,
minSpareRows: 1
});
</script>
</div>
</div>
</div>
<div class="rowLayout">
<div class="descLayout">
<div class="pad" data-jsfiddle="example2">
<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-instance="hot2" 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">
<button class="jsFiddleLink" data-runfiddle="example2" >Edit in jsFiddle</button>
</div>
<script data-jsfiddle="example2">
var
hiddenData = [
['', 'Kia', 'Nissan', 'Toyota', 'Honda'],
['2008', 10, 11, 12, 13],
['2009', 20, 11, 14, 13],
['2009', 30, 15, 12, 13]
],
container = document.getElementById('example2'),
hot2;
hot2 = new Handsontable(container, {
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" data-jsfiddle="example3">
<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" data-instance="hot3">Dump 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">
var
objectData = [
{id: 1, name: 'Ted Right', address: ''},
{id: 2, name: 'Frank Honest', address: ''},
{id: 3, name: 'Joan Well', address: ''}
],
container3 = document.getElementById('example3'),
hot3;
hot3 = new Handsontable(container3, {
data: objectData,
startRows: 5,
startCols: 3,
colHeaders: true,
minSpareRows: 1
});
</script>
</div>
</div>
</div>
<div class="rowLayout">
<div class="descLayout">
<div class="pad" data-jsfiddle="example4">
<a name="nested"></a>
<h2>Object data source (nested, 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" 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" data-instance="hot4">Edit in jsFiddle</button>
</div>
<script data-jsfiddle="example4">
var
nestedObjects = [
{id: 1, name: {first: "Ted", last: "Right"}, address: ""},
{id: 2, address: ""}, // HOT will create missing properties on demand
{id: 3, name: {first: "Joan", last: "Well"}, address: ""}
],
container4 = document.getElementById('example4'),
hot4;
hot4 = new Handsontable(container4, {
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" data-jsfiddle="example5">
<a name="dataschema"></a>
<h2>Object data source (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" data-instance="hot5" 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="example5" data-instance="hot5">Edit in jsFiddle</button>
</div>
<script data-jsfiddle="example5">
var
container = document.getElementById('example5'),
hot5;
hot5 = new Handsontable(container, {
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">
<div class="pad" data-jsfiddle="example6">
<a name="propertyschema"></a>
<h2>Function data source and schema (to reach where arrays and objects can't reach)</h2>
<p>
If your <strong>dataSchema</strong> is actually a constructor of an
object that doesn't directly expose its members, like a Backbone.js
model, you can specify functions for the <strong>data</strong> member
of each <strong>columns</strong> item.
</p>
<p>The below example shows a small example of using such objects:</p>
<div id="example6"></div>
<p>
<button name="dump" data-dump="#example6" data-instance="hot6" 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="example6" data-instance="hot6">Edit in jsFiddle</button>
</div>
<script data-jsfiddle="example6">
var
container6 = document.getElementById('example6'),
hot6;
hot6 = new Handsontable(container6, {
data: [
model({id: 1, name: 'Ted Right', address: ''}),
model({id: 2, name: 'Frank Honest', address: ''}),
model({id: 3, name: 'Joan Well', address: ''})
],
dataSchema: model,
startRows: 5,
startCols: 3,
colHeaders: ['ID', 'Name', 'Address'],
columns: [
{data: property('id')},
{data: property('name')},
{data: property('address')}
],
minSpareRows: 1
});
function model(opts) {
var
_pub = {},
_priv = {
"id": undefined,
"name": undefined,
"address": undefined
};
for (var i in opts) {
if (opts.hasOwnProperty(i)) {
_priv[i] = opts[i];
}
}
_pub.attr = function (attr, val) {
if (typeof val === 'undefined') {
window.console && console.log("\t\tGET the", attr, "value of", _pub);
return _priv[attr];
}
window.console && console.log("SET the", attr, "value of", _pub);
_priv[attr] = val;
return _pub;
};
return _pub;
}
function property(attr) {
return function (row, value) {
return row.attr(attr, value);
}
}
</script>
</div>
</div>
</div>
<div class="footer-text">
</div>
</div>
</div>
</div>
</div>
<div id="outside-links-wrapper"></div>
</body>
</html>