第三章：實作超狂打卡紀錄 Data Table (資料表)

當餐廳老闆打開這個管理後台，他最想看到的第一個畫面是什麼？絕對不是花俏的動畫，而是**「今天有誰來上班？誰遲到了？幾點打卡的？」** 這種結構化的資料呈現，我們在業界統一稱之為「資料表 (Data Table)」。

如果你是個剛學完 HTML 的新手，你可能會想用傳統的 <table>、<tr>、<td> 標籤，一行一行慢慢刻。但這是一場災難！因為老闆下一秒就會要求：「這個表格可以幫我依照『打卡時間』做排序 (Sorting) 嗎？資料太多了可以做分頁 (Pagination) 嗎？可以加一個搜尋框 (Search) 嗎？」

如果靠自己手寫原生 JavaScript 去實作這些功能，你可能要花上整整三天三夜。但在 Vibe Coding 的世界，我們只需要一句話，AI 就能幫你產出具備現代化 UI 與完整互動功能的企業級 Data Table。

🎯 本章目標

學習如何用 Vibe Prompt 指揮 AI，產出具備 Tailwind CSS 樣式的精美 Data Table 元件。
了解什麼是「假資料 (Mock Data)」，為什麼在串接 API 前必須先用假資料讓畫面動起來。
實作「狀態徽章 (Badge)」，讓遲到的人名一眼就能看出來。
輕鬆加入「即時文字搜尋」與過濾功能。

📊 第一步：用 Vibe 生成高顏值 Data Table

在前端開發的流程中，我們習慣「先看畫面，再接資料」。請先在你的專案 src/components/ 資料夾中，建立一個空的 DataTable.tsx 檔案。

🔥【Vibe Prompt 實戰咒語】 我在開發 React 後台。請幫我在 src/components/DataTable.tsx 中實作一個資料表元件。 需求如下： 1. 使用 Tailwind CSS 設計一個非常有質感的企業級表格：表格外框要有圓角 (rounded-xl) 與淡陰影 (shadow-sm)，表頭 (thead) 背景設為深藍色 (bg-slate-800)，字體為白色。 2. 表格欄位需包含：員工名稱、打卡時間、打卡類型(上班/下班)、狀態(正常/遲到)、操作(編輯按鈕)。 3. 請幫我寫一個假的 mockData 陣列 (至少包含 5 筆資料，要有人遲到有人正常)，放在元件內部用 React 的 useState 儲存。 4. 針對「狀態」欄位，請實作條件渲染 (Conditional Rendering)：如果是「正常」，請顯示綠色背景與文字的 Badge；如果是「遲到」，請顯示紅色背景與文字的 Badge。

AI 生成的表格程式碼會非常驚艷且極度模組化。它不僅幫你把 useState 寫好，連 badge 的顏色判斷邏輯都會幫你寫得乾乾淨淨：

// 💡 AI 生成的狀態 Badge 元件範例 (這展現了 React 組件化的威力)
const StatusBadge = ({ status }: { status: string }) => {
  const isLate = status === '遲到';
  
  // 利用 Tailwind 動態切換顏色
  const badgeColor = isLate 
    ? 'bg-red-100 text-red-700 border-red-200' 
    : 'bg-green-100 text-green-700 border-green-200';

  return (
    <span className={`px-3 py-1 rounded-full text-xs font-bold border ${badgeColor}`}>
      {status}
    </span>
  );
}

把這段 DataTable 渲染在你的主頁面上，你會看到一個比市面上很多老舊進銷存系統還要漂亮的介面！

🔍 第二步：秒殺痛點 - 加入即時搜尋 (Search) 與過濾功能

資料一多，老闆一定會要求搜尋功能：「我想查一下『王大明』這禮拜遲到了幾次」。在傳統開發中，這通常要寫複雜的正則表達式或字串比對，但在 Vibe Coding 中，你只要把需求說清楚。

🔥【Vibe Prompt 實戰咒語】 請幫我修改剛剛的 DataTable.tsx，加入一個搜尋功能。 1. 在表格正上方加上一個具有質感的文字輸入框 (Search Input)，加上放大鏡的 icon 更好。 2. 請新增一個 searchTerm 的 state 來記錄使用者的輸入。 3. 當我在搜尋框輸入文字時，表格資料 (mockData) 要能「即時過濾」出「員工名稱」包含該段文字的結果，並重新渲染表格。

AI 會幫你做兩件關鍵的事情：

建立搜尋框 UI 並綁定 onChange 事件去更新 searchTerm。

寫出一行極度優雅的過濾邏輯：

// 將原始資料進行過濾，轉換成要顯示在畫面上的資料
const filteredData = mockData.filter(item => 
  item.name.toLowerCase().includes(searchTerm.toLowerCase())
);

接著，AI 會把原本在 JSX 裡面的 mockData.map(...) 改成 filteredData.map(...)。

這時候，請你在搜尋框試著打幾個字。你會發現，你每打一個注音，表格的資料就會瞬間減少，完全不需要按 Enter 鍵，也不用等伺服器讀取！這就是所謂的 Client-side Filtering (客戶端即時過濾)，這會給老闆帶來極度絲滑的操作體驗。

💼 [商業應用場景] 什麼時候該用前端搜尋，什麼時候該用後端搜尋？

雖然我們剛剛用 React 做出的「即時搜尋」很帥，但如果你遇到懂技術的客戶，他可能會問：「萬一我有一萬筆打卡資料，前端搜尋會不會卡死？」

這是一個非常有價值的商業問題。你可以這樣回答：

「老闆您好，目前的設計是 Client-side Filtering。這種做法在資料筆數小於 1000 筆時，體驗是最好的，因為搜尋是瞬間完成、沒有延遲的。但如果您預期未來的打卡紀錄會累積到數萬筆，我們就必須改用 Server-side Search (後端搜尋)。這時候搜尋框必須按下 Enter 後，打 API 請 FastAPI 伺服器去 Supabase 資料庫裡面尋找，再把結果傳回前端。這需要額外收費實作 API，您希望先用哪種方案呢？」

展現你對架構的理解，就是你能夠提高專案報價的關鍵。

✅ 本章小結

這就是前端開發最有效率的工作流 (Workflow)： 先用 Mock Data 把 UI 樣式、搜尋邏輯、按鈕互動全部確認好，讓客戶看到「會動的畫面」。 一旦客戶點頭說 OK，下一章，我們就教你如何把這些假資料拔掉，換成真正從 FastAPI 後端呼叫回來的真實打卡紀錄！