shadcn/ui Table 示範

shadcn/ui 表格比較

這篇文章展示了使用 原始 Tailwind CSS 和 shadcn/ui 兩種方式建立的表格。

方式 1: 原始 Tailwind CSS 版本

使用自訂 Tailwind class 的 UniversalTable 元件：

ID姓名職位狀態評分
1AliceDeveloper活躍95
2BobDesigner活躍88
3CharlieManager離線92
4DianaDeveloper活躍97
5EveQA忙碌90

特色

  • ✅ 完全自訂樣式
  • ✅ 淡色分格線
  • ✅ Hover 效果
  • ✅ 響應式設計

方式 2: shadcn/ui 版本

使用 shadcn/ui 設計系統的 UniversalTableShadcn 元件：

ID姓名職位狀態評分
1AliceDeveloper活躍95
2BobDesigner活躍88
3CharlieManager離線92
4DianaDeveloper活躍97
5EveQA忙碌90

特色

  • ✅ 符合 shadcn/ui 設計語言
  • ✅ 支援深色模式（透過 CSS 變數）
  • ✅ 內建空資料狀態
  • ✅ 更簡潔的圓角邊框
  • ✅ 可選的 caption 支援

設計差異

原始 Tailwind 版本

  • 明確的分格線（垂直 + 水平）
  • 灰色背景表頭
  • 直接使用 Tailwind utility classes
  • 適合需要明確格線的資料表

shadcn/ui 版本

  • 只有水平分格線（更現代）
  • 使用 CSS 變數（支援主題切換）
  • 更柔和的 hover 效果
  • 符合 shadcn/ui 設計規範
  • 適合現代化的 UI 設計

如何選擇？

使用原始 Tailwind 版本，如果你需要：

  • 完全控制樣式細節
  • 明確的垂直分格線
  • 不需要深色模式
  • 簡單直接的實作

使用 shadcn/ui 版本，如果你需要：

  • 統一的設計系統
  • 深色模式支援
  • 更現代化的外觀
  • 與其他 shadcn/ui 元件整合

在 MDX 中使用

原始版本

import { UniversalTable } from '../../components/UniversalTable'

<UniversalTable client:load data={data} columns={columns} />

shadcn/ui 版本

import { UniversalTableShadcn } from '../../components/UniversalTableShadcn'

<UniversalTableShadcn
  client:load
  data={data}
  columns={columns}
  caption="可選的表格說明文字"
/>

技術細節

兩個版本都使用：

  • TanStack Table v8 - 強大的表格邏輯
  • React - UI 元件框架
  • Astro Islands - 只在需要時載入 JS

差異在於樣式層：

  • 原始版本：直接使用 Tailwind classes
  • shadcn/ui 版本：使用 shadcn/ui Table 元件 + CSS 變數

兩種方式都很棒，選擇最適合你專案需求的即可！