element instanceof HTMLDivelement is false in Tabulator init

Question

I would like to use Tabulator in a legacy GWT application.

I am creating the Tabulator from native JS (a file included with GWT's ScriptInjector). This is my code:

      const table = new Tabulator($(".tabulatordiv_id")[0], {
        data:tabledata, //assign data to table
        layout:"fitColumns", //fit columns to width of table (optional)
        columns: [{title:"Name", field:"name"}]
      });

I get the error: "Tabulator Creation Error - Invalid element provided".

I have looked into Tabulator and found that it stops here:

Tabulator.prototype.initializeElement = function (element) {
    if (typeof HTMLElement !== "undefined" && element instanceof HTMLElement) {
        this.element = element;
        return true;
    } else if (typeof element === "string") {
        this.element = document.querySelector(element);
        if (this.element) {
            return true;
        } else {
            console.error("Tabulator Creation Error - no element found matching selector: ", element);
            return false;
        }
    } else {
        console.error("Tabulator Creation Error - Invalid element provided:", element);
        return false;
    }
};

because "element instanceof HTMLElement" is FALSE.

I pulled out the page from the legacy app and made it work as similar to the original as possible (same js libs pulled in, GWT js files in etc.) in order to reproduce the problem, but failed. I can't reproduce it outside the legacy app.

However if I change the init in Tabulator.js to a little bit more lenient like this:

//      if (typeof HTMLElement !== "undefined" && element instanceof HTMLElement) {
        if (typeof HTMLElement !== "undefined" && typeof element !== "string") {
        this.element = element;

Then it works.

I am pretty sure that what I pass into Tabulator is a HTMLElement (double checked in browser, has all the properties a HTMLElement should have).

So I would like to ask how cardinal is that "instanceof HTMLElement" check is? How likely is that I will be run into trouble later if I go around that check in Tabulator init?

Answer 1

You seem to be passing in a redundant jquery selector in there. you might as well just pass the selector query string directly into Tabulator and let it find the element for you:

 const table = new Tabulator($(".tabulatordiv_id")[0], {

Should be

 const table = new Tabulator(".tabulatordiv_id", {