如何在ObservableHQ中使用Tabulator JavaScript库？

ObservableHQ的执行环境和普通HTML页面存在差异，直接照搬浏览器中的代码会因DOM处理、资源加载方式的不同失效，以下是可行的实现步骤：

1. 加载Tabulator样式表 #

在单独的单元格中插入CSS链接，确保样式正常生效：

html`<link href="https://unpkg.com/tabulator-tables@5.3.0/dist/css/tabulator.min.css" rel="stylesheet">`

2. 导入Tabulator库 #

在另一个单元格中通过require导入Tabulator模块：

Tabulator = require("https://unpkg.com/tabulator-tables@5.3.0/dist/js/tabulator.min.js")

3. 创建表格容器并初始化Tabulator #

ObservableHQ中不能直接依赖全局ID选择器，需先创建DOM容器元素，再将其传入Tabulator构造函数：

// 创建表格容器
const tableContainer = html`<div></div>`;

// 表格数据
const tableData = [
    {name:"Bob"},
    {name:"Steve"},
    {name:"Jim"},
];

// 初始化Tabulator
new Tabulator(tableContainer, {
    data: tableData,
    height: 200,
    columns: [
        {title:"Name", field:"name", width:200, editor:"input"},
    ]
});

// 返回容器元素，让Observable渲染它
tableContainer

关键差异说明 #

• DOM元素引用：ObservableHQ的单元格独立执行，全局ID可能无法被正确定位，必须直接使用创建的DOM元素实例。
• 资源加载逻辑：CSS需要通过html模板标签插入页面，JS模块通过require导入后才能在后续单元格中使用。
• 执行顺序：确保样式和库加载完成后再执行表格初始化代码，Observable会按单元格顺序依次执行，只需按上述顺序排列单元格即可。

内容的提问来源于stack exchange，提问作者Jakub.Novotny