制表符的 Web 组件支持 Table

Question

我想在 web 组件中使用非常好的 Tabulator (http://tabulator.info/) javascript table。

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

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

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

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

是否有另一种实例化制表符的方法table？

非常感谢任何帮助。

Answer 1

Tabulator 构造函数接受选择器或 DOM 节点到 table 的构造函数元素中，即：

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

所以只要您有权访问您的组件应该给您的那个节点，您就可以将其传递给构造函数

制表符的 Web 组件支持 Table

Webcomponent support for Tabulator Table

javascript

web-component

tabulator

native-web-component