对 Tabulator Table 的 Webcomponent 支持

问题描述

我想使用非常好的 Tabulator (http://tabulator.info/) javascript 表一个网络组件.

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

但是看起来主 Tabulator 实例只能通过这样的 html 选择器创建:

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

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

不幸的是，#example-table 在 webcomponents 的 shadowDom 中不可见:

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", {...});
}

是否有另一种实例化 Tabulator 表的方法?

Is there another way of instantiating the Tabulator table?

非常感谢任何帮助.

推荐答案

Tabulator 构造器接受选择器或 DOM 节点到表格的构造器元素中，即:

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

这篇关于对 Tabulator Table 的 Webcomponent 支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！