Adding custom checkbox on single header render issue when hiding column

Tags: #<Tag:0x00007efc6bbfdbc8> #<Tag:0x00007efc6bbfcb10>
#1

Hi team, I have a case where I had to add custom checkbox on a header. This works fine, but I had to hide some headers based on client requirement and then noticed that now the checkbox that was supposed to show up for just one header is showing up in adjacent column too. Here is the jsfiddle showing the behavior: https://jsfiddle.net/7v1zekph/

So the code I have to render the checkbox on the header is this:

    afterGetColHeader: (col, TH) => {
        if (hot.getColHeader(col) === "B") {
            if (!TH.querySelector('#active-toggler')) {
                let masterCheckbox = document.createElement("input");
                masterCheckbox.setAttribute("id", "active-toggler");
                masterCheckbox.setAttribute("type", "checkbox");
                TH.appendChild(masterCheckbox);
            }
        }
    }
});

As you can see that I want to render the checkbox only on column “B”, however with hide plugin, after I hide the first column “A”, the checkbox renders for column “C” as well.

I do have a fix for the said issue but just feel like its a hack rather than a solution.

hot.updateSettings({
    afterGetColHeader: (col, TH) => {
        if (hot.getColHeader(col) === "B") {
            if (!TH.querySelector('#active-toggler')) {
                let masterCheckbox = document.createElement("input");
                masterCheckbox.setAttribute("id", "active-toggler");
                masterCheckbox.setAttribute("type", "checkbox");
                TH.appendChild(masterCheckbox);
            }
        } else {
            TH.querySelector('#active-toggler')?.remove();
        }
    }
});

From readability perspective it feel like something is a miss, but maybe I am overthinking it. But if you think there is a cleaner solution please let me know.

Thanks.

#2

Hi @dee

I noticed that in your conditional statement you are checking for column header title, instead for the index.

I’m not sure if that’s the requirement, but if you just check for column index 0 it will give the same result as with your workaround: https://jsfiddle.net/handsoncode/aLtjfg2d/

#3

Hi @adrian.szymanski thank you for your response, that was really helpful. The reason I was using the column name instead of index was because in my actual use case we would show/hide columns based on user preference that we load prior to rendering the table.

However your example gives me the right insight, I could find out what columns were hidden prior to the column where I am adding custom checkbox and reduce the original(source) index number by the count.

Thanks again for the help.

#4

@dee

I’m glad I could help. I will close this topic now, but if you have any other questions, feel free to open a new one.

#5