HOT simple rendering

by Zeke Schmois

HTML

<div id="example1" class="handsontable"></div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://handsontable.com/dist/handsontable.full.js"></script> <link rel="stylesheet" media="screen" href="http://handsontable.com/dist/handsontable.full.css"> <link rel="stylesheet" media="screen" href="http://handsontable.com/demo/js/pikaday/css/pikaday.css"> <script src="http://handsontable.com/demo/js/moment/moment.js"></script> <script src="http://handsontable.com/demo/js/pikaday/pikaday.js"></script> <link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css?20140331"> <link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css?20140331"> <link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css?20140331"> <style type="text/css"> body {
    background: white;
    margin: 20px;
}
h2 {
    margin: 20px 0;
}

JavaScript

$(document).ready(function () {

    var data = [{
        id: 1,
        matsvalue: 'Ted',
        isActive: true,
        color: 'orange',
        date: '2008-01-01'
    }, {
        id: 2,
        matsvalue: 'John',
        isActive: false,
        color: 'black',
        date: null
    }, {
        id: 3,
        matsvalue: 'Al',
        isActive: true,
        color: 'red',
        date: null
    }, {
        id: 4,
        matsvalue: 'Ben',
        isActive: false,
        color: 'blue',
        date: null
    }],
        container = document.getElementById('example1'),
        hot1,
        greenRenderer;

    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: ["id", "matsvalue", "isActive", "color", "date"],
        minSpareRows: 1,
        columns: [{
            data: "id",
            type: 'text'
        }, {
            data: "matsvalue",
            renderer: greenRenderer
        }, {
            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"]
        }]
    });
    
    console.log(hot1.getData())
});