@reactual/handsontable
Version:
Spreadsheet-like data grid editor
217 lines (177 loc) • 7.36 kB
HTML
<html>
<head>
<meta charset='utf-8'>
<title>Cell types - Handsontable</title>
<!--
Loading Handsontable (full distribution that includes all dependencies apart from jQuery)
-->
<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="Cell types">
<meta property="og:description"
content="This example shows the default renderers and editors available in Handsontable.">
<meta property="og:url" content="http://handsontable.com/demo/renderers.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/renderers.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>Cell types</h2>
<p>This page is an introduction to Handsontable cell types:</p>
<ul>
<li><a href="#preview">Preview of built-in and custom cell types</a></li>
<li><a href="#anatomy">Anatomy of a cell type</a></li>
</ul>
</div>
</div>
</div>
<div class="rowLayout">
<div class="descLayout">
<div class="pad" data-jsfiddle="example1">
<a name="preview"></a>
<h2>Preview of built-in and custom cell types</h2>
<p>The below example shows all built-in cell types (in other words, combinations of cell renderers and
editors)
available in Handsontable:</p>
<ul>
<li>text</li>
<li><a href="numeric.html">numeric</a></li>
<li>checkbox</li>
<li><a href="date.html">date</a></li>
<li><a href="autocomplete.html">autocomplete</a></li>
</ul>
<p>The same example also shows the declaration of custom cell renderers, namely <code>yellowRenderer</code>
and
<code>greenRenderer</code>.
</p>
<div id="example1"></div>
<p>
<button name="dump" data-instance="hot1" 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">
<button class="jsFiddleLink" data-runfiddle="example1">Edit in jsFiddle</button>
</div>
<script data-jsfiddle="example1">
var data = [
{id: 1, name: 'Ted', isActive: true, color: 'orange', date: '2008-01-01'},
{id: 2, name: 'John', isActive: false, color: 'black', date: null},
{id: 3, name: 'Al', isActive: true, color: 'red', date: null},
{id: 4, name: 'Ben', isActive: false, color: 'blue', date: null}
],
container = document.getElementById('example1'),
hot1,
yellowRenderer,
greenRenderer;
yellowRenderer = function(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.style.backgroundColor = 'yellow';
};
greenRenderer = function(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.style.backgroundColor = 'green';
};
hot1 = new Handsontable(container, {
data: data,
startRows: 5,
colHeaders: true,
minSpareRows: 1,
columns: [
{data: "id", type: 'text'},
// 'text' is default, you don't actually have to declare it
{data: "name", renderer: yellowRenderer},
// use default 'text' cell type but overwrite its renderer with yellowRenderer
{data: "isActive", type: 'checkbox'},
{data: "date", type: 'date', dateFormat: 'YYYY-MM-DD'},
{data: "color",
type: 'autocomplete',
source: ["yellow", "red", "orange", "green", "blue", "gray", "black", "white"]
}
],
cell: [
{row: 1, col: 0, renderer: greenRenderer}
],
cells: function (row, col, prop) {
if (row === 0 && col === 0) {
this.renderer = greenRenderer;
}
}
});
</script>
</div>
</div>
</div>
<div class="rowLayout">
<div class="descLayout">
<div class="pad">
<a name="anatomy"></a>
<h2>Anatomy of a cell type</h2>
<p>A cell type is a predefined set of cell properties. Cell type defines what <strong>renderer</strong>
and <strong>editor</strong> should be used for a cell. They can also define any different cell property that
will be assumed for each matching cell.</p>
<p>For example writing:</p>
<pre class="javascript"><code>
columns: [{
type: 'text'
}]
</code></pre>
<p>Equals:</p>
<pre class="javascript"><code>
columns: [{
renderer: Handsontable.renderers.TextRenderer,
editor: Handsontable.editors.TextEditor
}]
</code></pre>
This mapping is defined in file <a
href="https://github.com/handsontable/handsontable/blob/master/src/cellTypes.js">src/cellTypes.js</a>
</div>
</div>
</div>
<div class="footer-text">
</div>
</div>
</div>
</div>
</div>
<div id="outside-links-wrapper"></div>
</body>
</html>