مكوّنات البيانات
<List> و <Table> و <Tree>: بعرض افتراضي، وقابلة للفرز والتحديد.
تعرض <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> نموذجًا موحدًا للوحة المفاتيح.
| المفاتيح | الإجراء |
|---|---|
↑ ↓ / j k | التنقل |
PgUp PgDn، Ctrl+U Ctrl+D | التنقل صفحة، نصف صفحة |
Home End / g G | الأول، الأخير |
↵ | onSelect |
| عجلة التمرير | تحريك المؤشر |
تملأ العنصر الأب افتراضيًا. مرّر height لتحديد عدد ثابت من الصفوف.
<List>
قائمة افتراضية العرض. يبلغ ارتفاع كل صف خلية واحدة.
<List items={requests} getLabel={(r) => `${r.method} ${r.path}`} onSelect={open}/>| Prop | الوصف |
|---|---|
items | أي مصفوفة |
renderItem | (item, { highlighted, focused }) => ReactNode |
isItemDisabled | يتجاوزه المؤشر |
height | الصفوف المرئية (الافتراضي: ملء المساحة) |
highlightedIndex / onHighlight | مؤشر متحكَّم فيه |
vimKeys | j k g G (الافتراضي true) |
<Table>
تتقاسم الأعمدة العرض المتبقي ما لم تحدد width. تستخدم الرؤوس والخلايا قواعد flex نفسها، لذا تتراصف دائمًا.
| حقل العمود | الوصف |
|---|---|
key | المعرّف وموصّل الوصول الافتراضي |
width / grow | عدد ثابت من الخلايا أو حصة من الباقي |
align | left right center |
value | قيمة العرض والفرز |
render | محتوى خلية مخصص |
compare | فرز مخصص |
الفرز
مع 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) الصفوف المرئية إذا احتجت إلى عارض خاص بك.