רכיבי נתונים

<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) חושף את השורות הגלויות אם נדרש מנגנון רינדור משלכם.