Add editable column headers to handsontable

I am using Handsontable in some of my projects at work. One of the requirements I had to implement recently was the ability to enter custom header values. Fortunately the developer of Handsontable did a very good job on documentation, so it was not as hard as I thought.

First step is to define a function for the colHeaders property. The function returns the HTML code for an input element, which gets the initial value of an array that contains the original values of the data.


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;
    }
});

The result looks like this:
image

What I don’t like so far is the fact, that the whole column gets selected if the textbox is clicked. To deactivate this behavior I needed to implement another function for the event afterOnMouseDown inside the Handsontable constructor:


afterOnCellMouseDown : function(sender, e){
    if (e.row === -1)
    {
        this.getInstance().deselectCell();
    }
}

image

You can find the complete example on jsfiddle and play around with it: https://jsfiddle.net/q58odgke/