Nested Columns are not rendered as expected

Tags: #<Tag:0x00007efc72829ab8>
#1

We use the below code for getting a nested table structure, observe that each of ‘NA’, ‘EU’, ‘AP’ are of colspan 3 and should have the child elements

‘Inco -<>’,
‘Inco te- <>’,
‘Total - <>’,

But the table is not rendered like that. Observe the screenshot attached.

Somehow this works fine if I paste the same code on jsfiddle http://jsfiddle.net/Lvzovgkz/1/. What is it that I could be doing wrong? Any pointers would be helpful. Let me know for any additional information.

this.hotTable = new Handsontable(container, {
data: Handsontable.helper.createSpreadsheetData(5,20),
//colHeaders: true,
rowHeaders: true,
nestedHeaders:[
[’’,
‘’,
‘’,
‘’,
‘’,
‘’,
‘’,
{label: ‘BP’, colspan: 2},
{label: ‘NA’, colspan: 3},
{label: ‘EU’, colspan: 3},
{label: ‘AP’, colspan: 3},
‘’,
‘’
],
[‘PN’,
‘Desc’,
‘Man’,
‘MF’,
‘MO’,
‘Al’,
‘Le’,
‘G P’,
‘N P’,
‘Inco - NA’,
‘Inco te- NA’,
‘Total - NA’,
‘Inco - EU’,
‘Inco te - EU’ ,
‘Total - EU’,
'Inco - APAC ‘,
‘Inco te- APAC’,
‘Total - APAC’,
’ Control’,
‘Comments’]
]
});

#2

Hi @vish

Thanks for sharing a long description of the issue. However I am a bit confused…
You have wrote that NA, EU and AP columns should have 3 child columns and that is exactly what I am getting in the Fiddle that you’ve send

Sometimes when you’re scrolling the tables are misaligned. Then you could try to set the viewportColumnRenderingOffset to maximum amount of columns in your table.

#3

Thanks Aleksandra for a prompt response. I was just pointing that it works in jsfiddle but not in my local set up.

So, i found the issue. It turns out that I was pointing to public handsontable css and was using handsontable-pro js, which was causing this issue.

#4

Ohhh ok. Glad you found a solution. Thanks for an update.

#5