Enabling custom editors for headerFilters

[AdonisGC]

Hi, RJaros & everyone!

I tried to replicate a Min-Max filter for number columns, but headerFilter only allows passing Editors to it so I can't replicate it. Currently, the only way to do it is by using jsTabulator, which is not very convenient for me.

Thank you very much, your library is incredible

[rjaros]

I've added headerFilterCustom option. It can be used like this (code almost directly copied from the Tabulator example):

headerFilterCustom = { cell, onRendered, success, cancel, b ->
    var end: dynamic = null

    val container = document.createElement("span")

    //create and style inputs
    val start: HTMLInputElement = document.createElement("input").unsafeCast<HTMLInputElement>()
    start.setAttribute("type", "number")
    start.setAttribute("placeholder", "Min")
    start.setAttribute("min", "0")
    start.setAttribute("max", "100")
    start.style.padding = "4px"
    start.style.width = "50%"
    start.style.boxSizing = "border-box"

    start.value = cell.getValue()?.toString() ?: ""

    fun buildValues(e: dynamic) {
        success(obj {
            this.start = start.value
            this.end = end.value
        });
    }

    fun keypress(e: dynamic) {
        if (e.keyCode == 13) {
            buildValues(obj {})
        }

        if (e.keyCode == 27) {
            cancel(obj {})
        }
    }

    end = start.cloneNode()
    end.setAttribute("placeholder", "Max")

    start.addEventListener("change", ::buildValues)
    start.addEventListener("blur", ::buildValues)
    start.addEventListener("keydown", ::keypress)

    end.addEventListener("change", ::buildValues)
    end.addEventListener("blur", ::buildValues)
    end.addEventListener("keydown", ::keypress)

    container.appendChild(start)
    container.appendChild(end)

    container

}, headerFilterFuncCustom = { headerValue, rowValue, rowData, filterParams ->
    if (rowValue) {
        if (headerValue.start != "") {
            if (headerValue.end != "") {
                rowValue >= headerValue.start && rowValue <= headerValue.end
            } else {
                rowValue >= headerValue.start
            }
        } else {
            if (headerValue.end != "") {
                rowValue <= headerValue.end
            } else {
                true
            }
        }
    } else true
}

[rjaros]

Released with 5.17.0

[AdonisGC]

It works perfectly fine. Thank you so much