Table、List 與圖表
以可排序的 Table 和不會使版面配置位移的圖表，取代手寫的資料列。
本章內容
- 可排序的表格
- 在表格上方加入圖表
- 更多元件
用元件取代手工編寫的資料列：支援鍵盤導覽與排序的 <Table>、支援虛擬化捲動的 <List>，以及用八分之一區塊和象限點繪製的圖表。
可排序的表格
欄位定義是由物件組成的陣列。未設定 width 的欄位依 grow 分配剩餘空間，value 是排序時比較的值，render 則負責繪製儲存格。
app/deployments/page.tsx+10-1tsx
新增：import { Table, type SortState, type TableColumn } from "@textjs/app";新增：新增：const COLUMNS: TableColumn<Deployment>[] = [新增： { key: "status", header: "Status", width: 11, render: (d) => <Status status={d.status} /> },新增： { key: "commit", header: "Commit", grow: 2 },新增： { key: "project", header: "Project", width: 10 },新增： { key: "duration", header: "Build", width: 6, align: "right", value: (d) => d.duration, render: (d) => <Text>{`${d.duration}s`}</Text> },新增：];export default function DeploymentsPage() {新增： const [sort, setSort] = useState<SortState | null>(null); …移除： return rows.map((d) => …);新增： return <Table columns={COLUMNS} rows={rows} getRowKey={(d) => d.id} sortable sort={sort} onSortChange={setSort} autoFocus />;}焦點在表格上時，↑ ↓ 移動反白位置，s 循環切換排序欄位，S 反轉排序方向，Enter 呼叫 onSelect。長表格只繪製可見的資料列。
在表格上方加入圖表
<Sparkline> 用最近的資料點填滿區塊。<BarChart> 會對齊標籤與數值。
app/deployments/page.tsx+15tsx
新增：import { BarChart, Sparkline } from "@textjs/app";新增：新增： const [chart, setChart] = useState<"spark" | "bars">("spark");新增： useInput((e) => {新增： if (e.input === "c") setChart((c) => (c === "spark" ? "bars" : "spark"));新增： });新增： return ( <Box className="flex-col grow gap-1">新增： <Box className="flex-col" height={4}>新增： <Text color="subtle">Build time, last 24 deployments</Text>新增： {chart === "spark" ? (新增： <Sparkline data={buildTimes} height={3} color="accent" />新增： ) : (新增： <BarChart data={byProject} formatValue={(v) => `${v}s`} />新增： )}新增： </Box> <Table … /> </Box> );圖表區塊的高度固定，因此切換圖表不會移動表格，也不會重新編碼表格的資料列。
更多元件
<List>、<Tree>、<Tabs>、<Select>、<Input>、<Modal>、<Toaster>、<CommandPalette>、<ProgressBar>、<LineChart> 等元件的說明收錄在元件文件中。
試用
這是本章結束時的 Acme Deploys，正在 DevTools 中執行。點擊操作區，再使用下方按鍵。
▼ 07 · Table、List 與圖表
開啟主控台
⌘⌥J
CtrlShiftJ
⌘⌥K
CtrlShiftK
⌘⌥C
應用程式在 DevTools 中渲染。先在 Safari「設定」→「進階」中開啟「顯示網頁開發者功能」。 接著點擊這裡並按 s。
在電腦上開啟
此應用程式在 DevTools 主控台中渲染，需要桌面版瀏覽器。
測驗
2 個問題回答所有問題以完成本章。