Tabulator: titleFormatter: "rowSelection" when clicking header select all checkbox

Question

When I click on the checkbox to select/deselect all rows in my table the headerClick function doesn't fire (It will fire for everything in the header but the checkbox). This is my column set up for it and I'm just wondering if this is a bug or if there is another way for me to trigger my function of getting all selected rows when I click the select all checkbox. Thanks!

columns: [
    {
        formatter: "rowSelection",
        titleFormatter: "rowSelection",
        hozAlign: "center",
        headerSort: false,
        visible: true,
        width: 40,
        headerClick: (e, column) => {
            console.log(e);
            let table = column.getTable();
            this.selectedRows = table.getSelectedRows();
            this.rowCount = this.selectedRows.length;
        }
    },

Answer 1

wouldnt say its a "bug", but it looks like you have a feature request, defintiely. The code for rowSelection has :

checkbox.addEventListener("click", function (e) {
    e.stopPropagation();
});

so on it's click, it's not letting anyone else know about it with stopProp(). And I dont see any code to getHeaderCheckbox() so that you might add your own clickHandler.

So I would go to to GitHub and lodge a feature request to be able to add your own handlers to this item. Unless he's already done it in 5.0 ? I haven't looked at it yet...

in the meantime, you could do your own version of this and not use the "rowSelection" formatter, or you could do a WHOLE lot of work to with getChildElements() to get a handle on the actual DOM element and insert your own handler (that would be LAST resort IMHO)

If you ABSOLUTELY must have it NOW (and I would absolutely NOT advise you doing this !!!) :

Give your column a "field" (say "selector" for example) for easy access and after your "new Tabulator()" ...

table.getColumn("selector")._column.titleElement.firstChild.addEventListener("click", function (e) {
    console.log(e);
    e.stopPropagation();
});

I did not say this, I was never here ....

Answer 2

The issue is you are trying to add functionality that isnt needed. The rowSelection formatter when used in the titleFormatter option will automatically handle the select/deselect all functionality, there is no need to listen to any click events yourself. it will do it all for you.

By adding the additional headerClick handler you are immediately negating the selection, by toggling things a second time