Skies.ui元件 (Components)
Table 表格
Skies.ui Table：外層建議 overflow-x-auto，內為語意 table。TableHeader／Body／Footer 對應 thead／tbody／tfoot；TableRow、TableHead、TableCell、TableCaption；樣式與 border-border、muted 一致。
範例與用法
| 專案 | 進度 |
|---|---|
| Skies.ui | 72% |
| 文件站 | 100% |
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@skies-ui/ui";
export function Example() {
return (
<Table>
<TableCaption>說明文字</TableCaption>
<TableHeader>
<TableRow>
<TableHead>欄 A</TableHead>
<TableHead>欄 B</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>資料</TableCell>
<TableCell>資料</TableCell>
</TableRow>
</TableBody>
</Table>
);
}not-prose 可避免 Fumadocs 的 typography 覆寫表格字級與邊距。
安裝
npx skies-ui@latest add table見 安裝與 CLI。
選取列（選用）
在 TableRow 上使用 data-state="selected" 可套用選取底色（與 Checkbox 同頁表單時常用）。
API 參考
| 元件 | 對應標籤 | 備註 |
|---|---|---|
Table | table | 外層捲動容器 |
TableHeader | thead | 底部分隔線 |
TableBody | tbody | 最後列無底框 |
TableFooter | tfoot | 頂部分隔 + muted/50 底 |
TableRow | tr | hover、data-[state=selected] |
TableHead | th | 小字、text-muted-foreground |
TableCell | td | p-3 |
TableCaption | caption | 下方說明、muted |
除需互動的儲存格外，Table 可在 Server Component 使用。