کامپوننت‌های داده

کامپوننت‌های <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 را تعیین کنند. سرستون‌ها و سلول‌ها از قواعد یکسان flex استفاده می‌کنند، بنابراین همیشه هم‌تراز می‌مانند.

#مرتب‌سازی

با فعال بودن 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) ردیف‌های قابل‌مشاهده را در اختیارتان می‌گذارد.