Introduction

Table 组件是一个强大的布局元素，用于在客户端页面上清晰地渲染复杂的表格数据集结构。它完整支持零 JS 响应式模板和数据驱动的 CMS 配置模式，支持干净的纵向滚动包裹、动态列对齐预设以及悬停高亮。

Usage

你可以轻松地从仪表盘直接映射数据并美化表格样式。

1. 带自定义对齐的基础纯文本表格

使用 plain 变体的标准文本清单，价格右对齐以便阅读。

{
  "type": "table",
  "variant": "plain",
  "columns": [
    { "header": "Name", "key": "name" },
    { "header": "Category", "key": "category" },
    { "header": "Price", "key": "price", "align": "end" }
  ],
  "rows": "[{\"name\": \"Laptop\", \"category\": \"Electronics\", \"price\": \"$999.00\"}, {\"name\": \"Coffee Mug\", \"category\": \"Home & Kitchen\", \"price\": \"$15.00\"}]"
}

2. 斑马纹交互表格（Surface 变体）

具备交替行阴影斑马纹、交互悬停高亮以及结构边框。

{
  "type": "table",
  "variant": "surface",
  "striped": true,
  "interactive": true,
  "columnBorder": true,
  "columns": [
    { "header": "System Service", "key": "service" },
    { "header": "Server Node", "key": "node", "align": "center" },
    { "header": "Status", "key": "status", "align": "end" }
  ],
  "rows": "[{\"service\": \"Auth Endpoint\", \"node\": \"EU-West\", \"status\": \"Online\"}, {\"service\": \"Payment API\", \"node\": \"US-East\", \"status\": \"Degraded\"}, {\"service\": \"File Storage\", \"node\": \"APAC-South\", \"status\": \"Online\"}]"
}

3. 行悬停操作 (Row Hover Actions)

通过传递 hoverActions，可以在行尾渲染一个宽度为零的尾随单元格以放置额外的操作控件（如“查看详情”按钮）。该单元格默认隐藏，直到行被悬停或其中的某个控件获得键盘焦点时才会显示。由于它采用绝对定位挂载在行尾，因此绝不会影响列宽布局；在显示时，它可能会视觉上遮挡最右侧的列。

hoverActions 是一个渲染函数（类似于 column.render），而不是一个在 CMS 中可序列化的字段 — 它在 Sveltia CMS 的 table 区块配置架构中不予暴露。

hoverActions 的水合及交互限制

当在完全或部分交互式的表格（例如启用了 Spalten sortable 表头排序，或表格通过父级 island 包裹器进行客户端水合）上使用 hoverActions 时，存在以下关于客户端状态的重要架构设计考虑：

1. 静态标记渲染：hoverActions 函数在服务器端渲染 (SSR) 期间执行。如果表格启用了排序或进行了客户端水合，任何直接嵌套在 hoverActions 内部的交互式事件监听器（如 onClick 或有状态的 island 组件）在 DOM 克隆和水合过程中都可能会丢失。
2. 推荐的事件/点击委托模式：与其在 hoverActions 回调中直接嵌入复杂的客户端 island 或动态事件挂钩，推荐采取以下策略：
   • 渲染带有描述性数据属性（data-attributes）的静态触发器或标准 HTML 元素（例如 <button type="button" data-action="delete" data-id={row.id}>删除</button>）。
   • 在 Table 组件外部挂载一个统一的有状态控制器 island。
   • 在全局（或在父元素上进行事件委托）监听事件，捕获带有相应数据属性的点击，并触发相关的弹窗（modal）、抽屉（drawer）或 API 调用。

Props

Column 列表属性（columns）

columns 列表参数中的每一项都接受以下字段：

Architecture Notes

• 优化的 JSON 字符串强制转换： 由于每个表格区块的原始行结构动态变化，Sveltia CMS 通过 rows 字段以转义的 JSON 数组字符串传递行项目。该字符串在渲染时安全解析，保证包体积最优，无需繁重的负载序列化。
• 纯 CSS 布局整洁： 表头、列轮廓和斑马纹依赖轻量且健壮的 Panda CSS 工具变量，消除布局跳动，并在移动端触控屏上即时渲染。
• 滚动固定： 使用 stickyHeader 固定列头时，利用溢出包裹内表头的标准 position: sticky，绕过客户端脚本中昂贵的滚动事件监听。