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 个问题回答所有问题以完成本章。