能否在Quarto文档中使用Observable Data Table Cell组件？

你想把带筛选和汇总功能的Observable Data Table Cell组件放进Quarto文档，但试了两种方法都只显示了原始数据集，没加载出带交互功能的组件：

• 期望呈现的效果：
  
• 实际得到的效果：
  

你试过的两种方式：

1. OJS导入代码：

import {datTbl} from "@novotny1akub/ojstbl"

datTbl

2. HTML嵌入代码：

<div id="observablehq-datTbl-5d27bed1"></div>
<p>Credit: Data Table Cell by novotny1akub</p>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@observablehq/inspector@5/dist/inspector.css">
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@5/dist/runtime.js";
import define from "https://api.observablehq.com/@novotny1akub/ojstbl@156.js?v=3";
new Runtime().module(define, name => {
  if (name === "datTbl") return new Inspector(document.querySelector("#observablehq-datTbl-5d27bed1"));
});
</script>

问题根源 #

Observable的Data Table Cell是交互式组件，不是单纯的数据对象。直接输出datTbl只会显示它底层的数据集，必须借助Observable的Runtime和Inspector来完成组件的渲染挂载，才能激活筛选、汇总这些交互功能。

可行解决方案 #

方案1：修正HTML嵌入代码

调整加载顺序，确保样式和渲染逻辑正确生效：

<div id="observablehq-datTbl-5d27bed1"></div>
<p>Credit: Data Table Cell by novotny1akub</p>

<script type="module">
// 先加载Inspector样式
const styleLink = document.createElement('link');
styleLink.rel = 'stylesheet';
styleLink.href = 'https://cdn.jsdelivr.net/npm/@observablehq/inspector@5/dist/inspector.css';
document.head.appendChild(styleLink);

// 再加载Runtime和组件模块
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@5/dist/runtime.js";
import define from "https://api.observablehq.com/@novotny1akub/ojstbl@156.js?v=3";

new Runtime().module(define, name => {
  if (name === "datTbl") {
    const container = document.querySelector("#observablehq-datTbl-5d27bed1");
    return new Inspector(container);
  }
});
</script>

方案2：在OJS单元格中完整渲染组件

不要直接输出数据，用Runtime和Inspector把组件挂载到单元格DOM里：

import {Runtime, Inspector} from "npm:@observablehq/runtime@5";
import define from "@novotny1akub/ojstbl";

// 初始化Runtime并加载模块
const runtime = new Runtime();
const module = runtime.module(define);

// 把datTbl组件渲染到当前OJS单元格的容器中
module.value("datTbl", (table) => {
  const container = document.currentScript.parentElement;
  const inspector = new Inspector(container);
  inspector.pending(table);
  return table;
});

注意事项 #

• 确保Quarto文档的输出格式为HTML（format: html），因为交互式组件依赖浏览器环境。
• 如果使用本地Quarto预览，记得清除缓存后刷新页面，避免旧资源干扰。

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