データコンポーネント
<List>、<Table>、<Tree>。仮想化、並べ替え、選択に対応。
<List>、<Table>、<Tree> は大規模なデータセットを表示します。表示範囲内の行のみをレンダリングします。
ライブ72×13 · booting Turbolog…tsx
<Table columns={[ { key: "name", header: "Service" }, { key: "region", header: "Region", width: 8 }, { key: "p95", header: "p95", width: 7, align: "right" }, ]} rows={services} sortable selectionMode="multiple" onSelect={(s) => router.push(`/services/${s.name}`)}/>ナビゲーション
<List>、<Table>、<Tree> は共通のキーボード操作を使います。
| キー | 操作 |
|---|---|
↑ ↓ / j k | 移動 |
PgUp PgDn, Ctrl+U Ctrl+D | 1ページ移動、半ページ移動 |
Home End / g G | 先頭、末尾 |
↵ | onSelect |
| ホイール | カーソルの移動 |
デフォルトでは親要素いっぱいに広がります。行数を固定するには height を渡します。
<List>
仮想化されたリストです。各行の高さは1セルです。
<List items={requests} getLabel={(r) => `${r.method} ${r.path}`} onSelect={open}/>| プロパティ | 説明 |
|---|---|
items | 任意の配列 |
renderItem | (item, { highlighted, focused }) => ReactNode |
isItemDisabled | カーソルがスキップする項目 |
height | 表示行数（デフォルト：親要素いっぱい） |
highlightedIndex / onHighlight | 制御されたカーソル |
vimKeys | j k g G（デフォルト：true） |
<Table>
width が設定されていない列は、残りの幅を分け合います。ヘッダーとセルには同じflexルールが適用されるため、常に位置が揃います。
| 列のフィールド | 説明 |
|---|---|
key | IDとデフォルトのアクセサー |
width / grow | 固定セル数、または残りの幅の配分比率 |
align | left right center |
value | 表示とソートに使う値 |
render | カスタムのセル内容 |
compare | カスタムのソート処理 |
ソート
sortable を指定すると、列番号を押してその列でソート（再度押すと方向を反転）、s で列を順に切り替え、S で方向を反転できます。ソートは安定ソートです。sort と onSortChange で制御します。
選択
selectionMode="multiple" はチェック列を追加し、Space でハイライトされた行の選択を切り替えます。選択の制御には selectedKeys と onSelectionChange を、安定したキーには getRowKey を使います。
<Tree>
ガイド線付きの展開可能なツリーです。
ライブ56×11 · booting Turbolog…tsx
<Tree data={[{ id: "app", label: "app", children: [{ id: "page", label: "page.tsx", hint: "2.8 kB" }] }]} defaultExpanded={["app"]} onSelect={(node) => open(node.id)}/>→ で枝を展開するか、枝の中へ移動します。← で折りたたむか、親へ移動します。Space で展開と折りたたみを切り替えます。独自のレンダラーが必要な場合は、flattenTree(data, expanded) で表示範囲内の行を取得できます。