Table、List、チャート
自作の行を、並べ替え可能なTableとレイアウトがずれないチャートに置き換えます。
この章の内容
- 並べ替え可能なテーブル
- テーブルの上にチャートを配置
- その他のコンポーネント
手書きの行をコンポーネントに置き換えます。キーボード操作と並べ替えに対応した <Table>、仮想スクロールに対応した <List>、1/8ブロックと四分区画のドットで描くチャートを使います。
並べ替え可能なテーブル
列はオブジェクトの配列です。width のない列は grow に応じて残りのスペースを分け合い、value は並べ替えで比較する値を指定し、render はセルを描画します。
追加：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> はラベルと値を揃えます。
追加：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で動作しています。パッドをクリックして、以下のキーを使います。
コンソールを開く
アプリはDevToolsに描画されます。まずSafariの「設定」→「詳細」で「Webデベロッパ用の機能を表示」をオンにします。 次にここをクリックして、sを押します。
デスクトップで開く
このアプリはDevToolsのコンソールに描画されるため、デスクトップブラウザーが必要です。
クイズ
2問すべての問題に回答すると章を完了できます。