# 玻璃数据表（Data Table）

- 类型 / 材质：`table` / `glass-apple`（玻璃）
- 状态：done ｜ 最后提交：2026-11-01
- 灵感来源：GOV.UK table / Polaris data-table
- 依据标准：`/design#pages` ｜ 组件页：`/showcase/component/table/glass-apple` ｜ 条目：`/r/table--glass-apple.json`
- 必缺状态：悬停 / 焦点
- 整页场景：
  - 组件目录（`/r/scene--list.json`）

## 规格

- table + caption（视觉隐藏）；表头 scope=col，首列当行头 scope=row
- 文本左对齐、数字右对齐 + tabular-nums，表头跟数据同向；不居中
- 内容换行不截断；放不下时容器横向滚动（role=region + aria-label + tabindex=0）
- 半透明底 + 模糊 + 发丝分隔线，悬停让整行陷进背景色
- 只读版没有排序 / 筛选 / 选择 / 固定列；空表换成空态组件

## 参数（CSS 变量）

`--color-text` `--color-text-muted` `--color-text-subtle` `--glass-bg` `--glass-border` `--glass-inset` `--glass-recess` `--text-2xs`

## Props 契约

| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
| `caption` | `string` | 必填 | — |
| `columns` | `TableColumn[]` | 必填 | — |
| `rows` | `TableRow[]` | 必填 | — |
| `framed` | `boolean` | 可选 | false = 只留滚动容器，材质底交给外层面板（嵌在卡片里时不再套一层卡） |
| `className` | `string` | 可选 | — |

## 提示词（可直接粘给智能体）

```
复现「玻璃数据表」— Data Table（表格 / Glass）
灵感来源：GOV.UK table / Polaris data-table
规格：
- table + caption（视觉隐藏）；表头 scope=col，首列当行头 scope=row
- 文本左对齐、数字右对齐 + tabular-nums，表头跟数据同向；不居中
- 内容换行不截断；放不下时容器横向滚动（role=region + aria-label + tabindex=0）
- 半透明底 + 模糊 + 发丝分隔线，悬停让整行陷进背景色
- 只读版没有排序 / 筛选 / 选择 / 固定列；空表换成空态组件
参数（CSS 变量）：--color-text --color-text-muted --color-text-subtle --glass-bg --glass-border --glass-inset --glass-recess --text-2xs
必缺状态：悬停 / 焦点
整页场景：组件目录
无障碍：焦点环 ≥2px 等效周长（SC 2.4.13）；指针目标 ≥24×24（SC 2.5.8）；动效带 prefers-reduced-motion 降级
参考：本站实样 /showcase/component/table/glass-apple · 标准 pages /design#pages · 调研笔记 /showcase/component/table/glass-apple#notes
```

## 调研笔记

import { type ReactNode } from 'react';

export interface TableColumn {
  key: string;
  header: string;
  /** end = 数字列：表头与数值一起右对齐（GOV / Polaris 同一条） */
  align?: 'start' | 'end';
  /** 列宽只写 Tailwind 宽度类，不写 px 字面量 */
  width?: string;
}

export interface TableRow {
  id: string;
  cells: Record<string, ReactNode>;
}

interface Props {
  caption: string;
  columns: TableColumn[];
  rows: TableRow[];
  /** false = 只留滚动容器，材质底交给外层面板（嵌在卡片里时不再套一层卡） */
  framed?: boolean;
  className?: string;
}

/** 玻璃数据表：半透明底 + 模糊 + 发丝分隔线；首列当行头，悬停让整行陷进背景 */
export function GlassAppleTable({ caption, columns, rows, framed = true, className = '' }: Props) {
  return (
    <div
      role="region"
      aria-label={caption}
      tabIndex={0}
      className={`
        overflow-x-auto outline-offset-2
        ${framed
          ? 'rounded-xl bg-[var(--glass-bg)] border border-[var(--glass-border)] backdrop-blur-xl shadow-[var(--glass-inset)]'
          : ''}
        ${className}
      `}
    >
      <table className="w-full min-w-[34rem] border-collapse text-sm">
        <caption className="sr-only">{caption}</caption>
        <thead>
          <tr className="border-b border-[var(--glass-border)]">
            {columns.map((c) => (
              <th
                key={c.key}
                scope="col"
                className={`
                  px-4 py-3 text-[length:var(--text-2xs)] font-medium uppercase tracking-[0.14em]
                  text-[var(--color-text-subtle)] whitespace-nowrap
                  ${c.align === 'end' ? 'text-right' : 'text-left'}
                  ${c.width ?? ''}
                `}
              >
                {c.header}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row) => (
            <tr
              key={row.id}
              className="border-b border-[var(--glass-border)] last:border-b-0 transition-colors hover:bg-[var(--glass-recess)]"
            >
              {columns.map((c, i) =>
                i === 0 ? (
                  <th
                    key={c.key}
                    scope="row"
                    className="px-4 py-3 text-left font-medium text-[var(--color-text)] break-words"
                  >
                    {row.cells[c.key]}
                  </th>
                ) : (
                  <td
                    key={c.key}
                    className={`
                      px-4 py-3 text-[var(--color-text-muted)] break-words
                      ${c.align === 'end' ? 'text-right tabular-nums whitespace-nowrap' : ''}
                    `}
                  >
                    {row.cells[c.key]}
                  </td>
                ),
              )}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}