Komponen data
<List>, <Table>, dan <Tree>: tervirtualisasi, dapat diurutkan, dan dipilih.
<List>, <Table>, dan <Tree> menampilkan kumpulan data besar. Hanya baris yang terlihat yang di-render.
<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}`)}/>Navigasi
<List>, <Table>, dan <Tree> menggunakan model keyboard yang sama.
| Tombol | Tindakan |
|---|---|
↑ ↓ / j k | Berpindah |
PgUp PgDn, Ctrl+U Ctrl+D | Satu halaman, setengah halaman |
Home End / g G | Pertama, terakhir |
↵ | onSelect |
| Roda gulir | Memindahkan kursor |
Secara default, komponen ini memenuhi induknya. Berikan height untuk menetapkan jumlah baris.
<List>
Daftar tervirtualisasi. Setiap baris memiliki tinggi satu sel.
<List items={requests} getLabel={(r) => `${r.method} ${r.path}`} onSelect={open}/>| Prop | Deskripsi |
|---|---|
items | Array apa pun |
renderItem | (item, { highlighted, focused }) => ReactNode |
isItemDisabled | Dilewati kursor |
height | Baris yang terlihat (default: memenuhi induk) |
highlightedIndex / onHighlight | Kursor terkontrol |
vimKeys | j k g G (default true) |
<Table>
Kolom berbagi lebar yang tersisa kecuali jika kolom menetapkan width. Header dan sel menggunakan aturan flex yang sama, sehingga selalu sejajar.
| Field kolom | Deskripsi |
|---|---|
key | ID dan pengakses default |
width / grow | Jumlah sel tetap atau bagian dari sisa lebar |
align | left right center |
value | Nilai tampilan dan pengurutan |
render | Konten sel kustom |
compare | Pengurutan kustom |
Pengurutan
Dengan sortable, tekan nomor kolom untuk mengurutkan berdasarkan kolom tersebut (tekan lagi untuk membalik arah), s untuk berpindah antar kolom, dan S untuk membalik arah. Pengurutan bersifat stabil. Kontrol dengan sort dan onSortChange.
Pemilihan
selectionMode="multiple" menambahkan kolom centang; Space mengubah status pilihan baris yang disorot. Gunakan selectedKeys dan onSelectionChange untuk mengontrolnya, serta getRowKey untuk key yang stabil.
<Tree>
Pohon yang dapat diperluas dengan garis panduan.
<Tree data={[{ id: "app", label: "app", children: [{ id: "page", label: "page.tsx", hint: "2.8 kB" }] }]} defaultExpanded={["app"]} onSelect={(node) => open(node.id)}/>→ memperluas atau masuk ke cabang. ← menciutkan atau melompat ke induk. Space bergantian memperluas atau menciutkan. flattenTree(data, expanded) menyediakan baris yang terlihat jika Anda memerlukan renderer sendiri.