ڈیٹا کمپوننٹس

<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) نظر آنے والی قطاریں فراہم کرتا ہے۔