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