Nested headers: what causes column shifts after merged cells?

Tags: #<Tag:0x00007f8b19da1a50>
#1

Hi there,

Trying to create my first nested headers, with settings not so different from the example in the tutorial:

[…]
colHeaders: true,
nestedHeaders: [
[{label: ‘A1’, colspan: 2}, {label: ‘C1’, colspan: 2}, {label: ‘E1’, colspan: 2}, {label: ‘G1’, colspan: 2}],
[‘A2’, ‘B2’, ‘C2’, ‘D2’, ‘E2’, ‘F2’, ‘G2’, ‘H2’]
],
[…]

In the first header row, I get an empty column after the ‘A1’ and ‘C1’ ones, i.e. A1 correctly spans over A2 and B2, but then an empty cell is placed over C2, C1 spans over D2 and E2 (instead of C2-D2) and so on…

I can’t figure out what’s wrong with these simple settings, any help will be much appreciated!

environment: handsontable-pro@1.18.1 with Vue, windows, tested on both Firefox (59.0.2) and Chrome (65.0.3325.181)

#2

Hi @brunos

I have used your settings

to construct this demo http://jsfiddle.net/handsoncode/gb7dtpno/

It looks like the logic is fine. Maybe the data is not bounded correctly or the number of columns in incorrect.

#3

Hi Aleksandra,

Thanks for your quick reply! The number of columns is OK. Data were OK when using a single line header but I’ll double-check anyway. I’ll see also if that could be caused by some other customization attempts as I’m starting to play with renderers too :sweat:

#4

I still get the same issue with empty data and basic columns :disappointed:
Could there be anything wrong with the Vue wrapper?

#5

If you have any ideas what can cause the bug just push it to the demo I’ve send you and we’ll check it together.

#6

Right, I didn’t mention it, the demo works fine, hence the potential blame on the wrapper…

#7

It may be the wrapper. Can you share a demo on stackblitz?

#8

Never tried :blush:, I don’t see Vue in the enviornments choice but will look at how to do it if I can find some time…

The example is now really reduced to an empty table with a basic list of columns and these headers.
I also tried to simplify the first row in the nested headers, replacing all but one colspans with simple labels and the empty column is always added after (on the right) the colspan.

#9

Here’s a demo that I have using codepen https://codepen.io/js-ziggle/pen/zWWzQL but each time I change it it doesn’t want to reload. I do not know if it’s my fault or the codepen has some issues right now.

#10

Thanks… I tried but only get an (apparently default) empty table displayed. Same issue as yours?

#11

I finally made it work https://codepen.io/anon/pen/VXgQeM?editors=0010

I was getting Loading... screen all the time.

#12

Thanks again, Aleksandra, I knew there was certainly something silly on my side. It took me a while but I found it: for some reason, I was still using the handsontable.full.css file of the CE version :confused:
I owe you a beer!

#13

Happy to help @brunos

Let me know if you’d need anything else.

#14