How to merge cell or make colspan on jquery-handsontable?

Question

I am using handsontable to make excel-like table. I want to have merged title on my table. It is possible? Or is there any other solution? thx.

<div id="example1" style="width: 400px; height: 300px; overflow: scroll"></div>

<script>
            function mergeCell(instance, td, row, col, prop, value, cellProperties) {
              Handsontable.TextCell.renderer.apply(this, arguments);
              td.colspan = 2;
            }
            var myData = [
              ["", "1", "2", "3", "4", "5", "6"], 
                //i want to merge this first row using function 'mergeCell'
              ["Year", "d", "n", "d", "n", "d", "n", "d", "n", "d", "n", "d", "n"],
              ["2009", '', -11, 14, 13, 1, 2, 8, 13, -5, 9, 12, 0],
              ["2010", '', 15, -12, 1, -5, '', 12, 3, -1, '', 12, 13],
              ["2008", -5, '', 12, 13, -5, '', 12, 13, -4, '', 10, 3]];

            $("#example1").handsontable({
              data: myData,
              fixedRowsTop: 2,
              fixedColumnsLeft: 1,
              contextMenu: true,
              cells: function (row, col, prop) {
                var cellProperties = {};
                  cellProperties.readOnly = true;                   
            if (col != 0 && row === 0) {
                  cellProperties.renderer = mergeCell; 
                }
                return cellProperties;
              }
            });
</script>

Answer 1

just in case anyone happens to run through here, I forked a non-working fiddle and updated it so it would demo a working handsontable with colspan or merged cells.

http://jsfiddle.net/9b93zdf6/2/

$(document).ready(function () {

// Quick and dirty model for name and address.    
function model(first, last, street, state, zip) {
    return {
        name: { first: first, last: last },
        address: { street: street, state: state, zip: zip }
    };
}

var $container = $("#example");
$container.handsontable({
    data: [
        model('Chico', 'Marx', '513 Broadway', 'New York', '10013'),
        model('Harpo', 'Marx', '3913 Michigan Ave', 'Chicago', '40123'),
        model('Groucho', 'Marx', '334 Park Place', 'Atlantic City', '31513'),
        model( 'Zeppo', 'Marx', '3135 Sunset Blvd', 'Los Angeles', '14123')
    ],
    dataSchema: model,
    startRows: 4,
    startCols: 5,
    colHeaders: ['First', 'Last', 'Street', 'State', 'Zip'],
    rowaHeaders: false,
    manualColumnResize: true,
    columns: [
        {data: 'name.first'},
        {data: 'name.last'},
        {data: 'address.street'},
        {data: 'address.state'},
        {data: 'address.zip'}
    ],
    afterRender: function () {
         $container.find('thead').find('tr').before(
             '<tr id="header-grouping"><th colspan="2">Name</th>' + 
             '<th colspan="3">Address</th></tr>');
    },
    beforeRender: function() {
        $('#header-grouping').remove();
    }, 
    modifyColWidth: function () {
       //$('#header-grouping').remove();
    }
  });

});

happy coding

Answer 2

I found the answer to my question! function mergeCell should be called AFTER other functions, if we have them.

<div id="example1" style="width: 400px; height: 300px; overflow: scroll"></div>

<script>
            function mergeCell(instance, td, row, col, prop, value, cellProperties) {
              Handsontable.TextCell.renderer.apply(this, arguments);
              //td.colspan = 2; wrong, should be like this :
              td.setAttribute("colSpan", "2");
            }
            var myData = [
              ["", "1", "2", "3", "4", "5", "6", "", "", ""], 
                //i dont know why i should have this extra columns
              ["Year", "d", "n", "d", "n", "d", "n", "d", "n", "d", "n", "d", "n"],
              ["2009", '', -11, 14, 13, 1, 2, 8, 13, -5, 9, 12, 0],
              ["2010", '', 15, -12, 1, -5, '', 12, 3, -1, '', 12, 13],
              ["2008", -5, '', 12, 13, -5, '', 12, 13, -4, '', 10, 3]];

            $("#example1").handsontable({
              data: myData,
              fixedRowsTop: 2,
              fixedColumnsLeft: 1,
              contextMenu: true,
              cells: function (row, col, prop) {
                var cellProperties = {};
                  cellProperties.readOnly = true;                   
            if (col != 0 && row === 0) {
                  cellProperties.renderer = mergeCell; 
                }
                return cellProperties;
              }
            });
</script>

EDIT This script load wrong data. At last, I cancelled making my title cells merged.