Ful length row Handsontable - handsontable

Question

I'm looking for a excel like table for my app then at my search I saw this Handsontable but one also of my requirements is groupings on the table.
Is it possible at Handsontable a ful length row like this?

Answer 1

I'm not sure what you mean by 'full length row' but a couple of options that may help you are:
Rendering custom html
This allows you to manipulate both the headers and cells. Example:
var $container = $("#example2");
$container.handsontable({
colHeaders: function (col) {
switch (col) {
case 0: //First column header
return "<b>Bold</b> and <em>Beautiful</em>";
case 1: //Second column header
var txt = "Some <input type='checkbox' class='checker' ";
txt += isChecked ? 'checked="checked"' : '';
txt += "> checkbox";
return txt;
}
}
});
or
Column stretching
This lets you stretch a column to fill the row to a 'full length row'. Example option to stretch the last column:
stretchH: 'last'

Answer 2

I think what your looking at is merging cells. It exists two different ways to merge cells with HandsonTable.
You can either directly specify the merges you want in the options:
hot = new Handsontable(container, {
data: myData,
rowHeaders: true,
colHeaders: true,
contextMenu: true,
mergeCells: [
{row: 0, col: 0, rowspan: 1, colspan: 4}, // for description
{row: 3, col: 4, rowspan: 2, colspan: 2}, // any other merges
{row: 5, col: 6, rowspan: 3, colspan: 3}
]
});
or create an array with all the merges and give it later to the table:
var mergeArr = new Array();
var descriptionMerge = {
row : 0,
col : 0,
rowspan : 1,
colspan : 4
}
mergeArr.push(descritpionMerge);
hot = new Handsontable(container, {
data: myData,
rowHeaders: true,
colHeaders: true,
contextMenu: true,
mergeCells: mergeArr
});
row: starting row of the merge.
col: starting col of the merge.
rowspan: number of rows that will be merged from the starting row.
colspan: number of cols that will be merged from the starting col.
In your case, you want a full length row, so you need to merge cells in this way :
{row: yourStartingRow, col: yourStartingCol, rowspan: 1, colspan: lengthOfYourTable}
HandsonTable documentation: http://docs.handsontable.com/0.15.1/demo-merge-cells.html
Bonus: If you want to center the text in your merged cells, just use the className : "htMiddle" option.
http://docs.handsontable.com/0.17.0/demo-alignment.html

Answer 3

If you want to group headers, you can used the nested headers to do this:
The code uses the "NestedHeaders" tag like so:
var example1 = document.getElementById('example1');
var hot = new Handsontable(example1, {
data: Handsontable.helper.createSpreadsheetData(5,10),
colHeaders: true,
rowHeaders: true,
nestedHeaders: [
['A', {label: 'B', colspan: 8}, 'C'],
['D', {label: 'E', colspan: 4}, {label: 'F', colspan: 4}, 'G'],
['H', {label: 'I', colspan: 2}, {label: 'J', colspan: 2}, {label: 'K', colspan: 2}, {label: 'L', colspan: 2}, 'M'],
['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W']
]
});
See more on the handsontable documentation