Edit in JSFiddle

$(document).ready(function () {

    var colHeadings = ['', 'Maserati', 'Mazda', 'Mercedes', 'Mini', 'Mitsubishi'];
    var data = [
        ['2009', 0, 2941, 4303, 354, 5814],
        ['2010', 3, 2905, 2867, 412, 5284],
        ['2011', 4, 2517, 4822, 552, 6127],
        ['2012', 2, 2422, 5399, 776, 4151]
    ],
        container = document.getElementById('example'),
        hot;

    hot = new Handsontable(container, {
        data: data,
        colHeaders: function (index) {
            var textbox = '<input type="text" value="' + colHeadings[index] + '" />';
            return textbox;
        },
        afterOnCellMouseDown: function (sender, e) {
            if (e.row === -1) {
                this.getInstance().deselectCell();
            }
        }
    });

});

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

</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/css/samples.css"> <link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css"> <link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css"> <style type="text/css"> body {
    background: white;
    margin: 20px;
}
</style>