Webcomponent support for Tabulator Table

Question

I would like to use the very nice Tabulator (http://tabulator.info/) javascript table in a webcomponent.

However it looks like the main Tabulator instance can only be created via a html selector like this:

var table = new Tabulator("#example-table", {...});

Unfortunately looks like the #example-table is not visible in the shadowDom of webcomponents:

class WcProjects extends HTMLElement {
    constructor() {
        super();
        // Attach a shadow root to the element.
        let shadowRoot = this.attachShadow({mode: 'open'});
        shadowRoot.innerHTML = `<div id="example-table"></div>`;
}
connectedCallback() {
    var table = new Tabulator("#example-table", {...});
}

Is there another way of instantiating the Tabulator table?

Any help is much appreciated.

Answer 1

The Tabulator constructor accepts either a selector or a DOM node into the constructor element of the table, ie:

var tableHolder = document.createElement("div");
var table = new Tabulator(tableHolder , {...});

so as long as you have access to that node, which your component should give you, you can pass that into the constructor