Nested Headers having holes

Tags: #<Tag:0x00007f8b23c70c30> #<Tag:0x00007f8b23c70a28>
#1

Hi there,

I’m experimenting nestedHeaders for the first time, and although it works as intended on simple jsfiddle samples, I have some holes in the first row of headers :

image
image.png1548×171 10.8 KB

In this example, I’s like to create 2 sub-columns attribute1 and attribute2 for each month of the year (and a recap for the whole year on the two first sub-columns).
The nestedHeder object I use is this one :

[
    [
        { "label": "2024", "colspan": 2 },
        { "label": "01/2024", "colspan": 2 },
        { "label": "02/2024", "colspan": 2 },
        { "label": "03/2024", "colspan": 2 },
        { "label": "04/2024", "colspan": 2 },
        { "label": "05/2024", "colspan": 2 },
        { "label": "06/2024", "colspan": 2 },
        { "label": "07/2024", "colspan": 2 },
        { "label": "08/2024", "colspan": 2 },
        { "label": "09/2024", "colspan": 2 },
        { "label": "10/2024", "colspan": 2 },
        { "label": "11/2024", "colspan": 2 },
        { "label": "12/2024", "colspan": 2 }
    ],
    [
        "attribute1",
        "attribute2",
        "attribute1",
        "attribute2",
        "attribute1",
        "attribute2",
        "attribute1",
        "attribute2",
        "attribute1",
        "attribute2",
        "attribute1",
        "attribute2",
        "attribute1",
        "attribute2",
        "attribute1",
        "attribute2",
        "attribute1",
        "attribute2",
        "attribute1",
        "attribute2",
        "attribute1",
        "attribute2",
        "attribute1",
        "attribute2",
        "attribute1",
        "attribute2"
    ]
]

Our parametrization of HandsOnTable is quite heavy and reliant on other parts of our software, so I suppose there is some interaction with another feature. Any idea about what it might be ?
It’s not easy to share a jsfiddle to play with, sorry for that :confused:

#2

Hi @gregoire.spiers

I tried to recreate this behavior, and it seems to be looking fine: https://jsfiddle.net/handsoncode/nfxrgw5u/

You can modify this example to match the settings you have and make the issue replicable.

#3

Hi @adrian.szymanski,

I just found what the issue was. I was using the afterGetColHeader: function (col, TH) hook in which I started with TH.className = 'someCssClass'. I changed it to TH.className += 'someCssClass' and it’s :ok_hand: . It was a pain to debug though :wink:

Here is a demo in case it is relevant for your dev team : https://jsfiddle.net/12y7x9br/3/

#4

Hi @gregoire.spiers

Thank you for the update. I’m glad that you were able to find the solution for this issue.

#5