Veri bileşenleri
<List>, <Table> ve <Tree>: sanallaştırılmış, sıralanabilir ve seçilebilir.
<List>, <Table> ve <Tree> büyük veri kümelerini gösterir. Yalnızca görünür satırlar render edilir.
<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}`)}/>Gezinme
<List>, <Table> ve <Tree> aynı klavye modelini paylaşır.
| Tuşlar | Eylem |
|---|---|
↑ ↓ / j k | Hareket |
PgUp PgDn, Ctrl+U Ctrl+D | Sayfa, yarım sayfa |
Home End / g G | İlk, son |
↵ | onSelect |
| Tekerlek | İmleci hareket ettirme |
Varsayılan olarak üst öğelerini doldururlar. Sabit sayıda satır için height değerini geçin.
<List>
Sanallaştırılmış bir liste. Satırlar bir hücre yüksekliğindedir.
<List items={requests} getLabel={(r) => `${r.method} ${r.path}`} onSelect={open}/>| Prop | Açıklama |
|---|---|
items | Herhangi bir dizi |
renderItem | (item, { highlighted, focused }) => ReactNode |
isItemDisabled | İmlecin atladığı öğeler |
height | Görünür satırlar (varsayılan: doldurma) |
highlightedIndex / onHighlight | Kontrollü imleç |
vimKeys | j k g G (varsayılan true) |
<Table>
Sütunlar, width belirtilmedikçe kalan genişliği paylaşır. Başlıklar ve hücreler aynı flex kurallarını kullanır, bu nedenle her zaman hizalanırlar.
| Sütun alanı | Açıklama |
|---|---|
key | Kimlik ve varsayılan erişimci |
width / grow | Sabit hücre sayısı veya kalan genişlikten pay |
align | left right center |
value | Gösterim ve sıralama değeri |
render | Özel hücre içeriği |
compare | Özel sıralama |
Sıralama
sortable ile bir sütuna göre sıralamak için sütunun numarasına (tersine çevirmek için tekrar), sütunlar arasında geçiş yapmak için s, yönü tersine çevirmek için S tuşuna basın. Sıralama kararlıdır. sort ve onSortChange ile kontrol edin.
Seçim
selectionMode="multiple" bir onay sütunu ekler; Space vurgulanan satırın seçim durumunu değiştirir. Seçimi kontrol etmek için selectedKeys ve onSelectionChange, kararlı anahtarlar için getRowKey kullanın.
<Tree>
Kılavuz çizgileri olan genişletilebilir bir ağaç.
<Tree data={[{ id: "app", label: "app", children: [{ id: "page", label: "page.tsx", hint: "2.8 kB" }] }]} defaultExpanded={["app"]} onSelect={(node) => open(node.id)}/>→ bir dalı genişletir veya dalın içine ilerler. ← dalı daraltır veya üst öğeye atlar. Space genişletme durumunu değiştirir. Kendi renderer’ınıza ihtiyaç duyarsanız flattenTree(data, expanded) görünür satırları sunar.