डेटा कंपोनेंट

<List>, <Table> और <Tree> बड़े डेटा सेट दिखाते हैं। सिर्फ़ दिखाई देने वाली पंक्तियां रेंडर होती हैं।

<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> एक ही कीबोर्ड मॉडल का इस्तेमाल करते हैं।

डिफ़ॉल्ट रूप से ये अपने पैरेंट को भरते हैं। पंक्तियों की संख्या तय करने के लिए height दें।

#<List>

एक वर्चुअलाइज़्ड लिस्ट। हर पंक्ति की ऊंचाई एक सेल है।

<List  items={requests}  getLabel={(r) => `${r.method} ${r.path}`}  onSelect={open}/>

#<Table>

जिन कॉलम की width सेट नहीं है, वे बची हुई चौड़ाई बांटते हैं। हेडर और सेल एक ही फ़्लेक्स नियम इस्तेमाल करते हैं, इसलिए वे हमेशा एक सीध में रहते हैं।

#सॉर्टिंग

sortable के साथ, किसी कॉलम के हिसाब से सॉर्ट करने के लिए उसका नंबर दबाएं (क्रम उलटने के लिए दोबारा), कॉलम बदलने के लिए s और दिशा उलटने के लिए S दबाएं। सॉर्टिंग स्थिर है। इसे sort और onSortChange से नियंत्रित करें।

#चयन

selectionMode="multiple" एक चेक कॉलम जोड़ता है; Space हाइलाइट की गई पंक्ति का चयन टॉगल करता है। इसे नियंत्रित करने के लिए selectedKeys और onSelectionChange इस्तेमाल करें, और स्थिर कुंजियों के लिए getRowKey इस्तेमाल करें।

#<Tree>

गाइड वाला एक ट्री जिसे फैलाया जा सकता है।

<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) दिखाई देने वाली पंक्तियां उपलब्ध कराता है।