Components / Structured Outputs

Data Table

数据表格：外框弱底 + 内嵌白体 + 品牌小标模型行。仅入库不接入，已移植（1:1 aicss.dev）。

① 活体演示

上游演示数据（模型对比行，OpenAI/Anthropic/Meta 品牌标）。四态：running（与 ok 同貌）/ ok / error（尾行提示）/ empty。

② 对比台

左：wb-ui 活体；右：aicss.dev 原站截图存档（2026-08-13 采集，可滚动）。

wb-ui 活体

aicss.dev 原站截图（design/reference/aicss/data-table/screenshot.png）

③ 真实字段说明

无真实事件，仅入库不接入（契约 3.C.1 / 要素 4.4）：run event 里没有结构化表格数据事件（字段真源 packages/contracts/workbench-events.mjs:11-77）。日后可能的数据来源：assistant markdown 表格的渲染换皮（renderMarkdownSafe 的 table 分支）——属增强，另立需求。

数据源	形态	说明
（现状）	—	无表格数据类 run event，不接入 workbench
（日后）markdown 表格换皮	columns + rows	另立需求；本组件 API 已按此形态设计

④ 用在 workbench 哪个位置

暂不接入。若日后接入，候选位置是 renderMarkdownSafe(:4624) 的 markdown 表格渲染分支；在此之前仅作为库组件存档与展示。

⑤ 复制即用代码

引入 tokens + 组件 CSS/JS。全部相对路径、零依赖。

<link rel="stylesheet" href="design/wb-ui/lib/tokens.css">
<link rel="stylesheet" href="design/wb-ui/lib/components/data-table.css">
<script src="design/wb-ui/lib/components/data-table.js"></script>

WbUI.dataTable.render(el, {
  columns: ["Model", "Context", "$/1M in"],
  rows: [
    { cells: ["gpt-4o", "128k", "$5.00"] },      // 首列自动配品牌小标
    { cells: ["claude-3.5", "200k", "$3.00"] },
    { cells: ["llama-3.1", "128k", "$0.90"] }
  ]
});

Ported from aicss.dev/components/data-table, fetched 2026-08-13. Internal use only（上游无 license 声明，对外使用前须确认授权——docs/86 R1）。