Component dữ liệu
<List>, <Table> và <Tree>: ảo hóa, có thể sắp xếp và chọn.
<List>, <Table> và <Tree> hiển thị các tập dữ liệu lớn. Chỉ những dòng đang hiển thị mới được render.
<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}`)}/>Điều hướng
<List>, <Table> và <Tree> dùng chung một mô hình thao tác bàn phím.
| Phím | Thao tác |
|---|---|
↑ ↓ / j k | Di chuyển |
PgUp PgDn, Ctrl+U Ctrl+D | Di chuyển một trang, nửa trang |
Home End / g G | Đến đầu, cuối |
↵ | onSelect |
| Con lăn | Di chuyển con trỏ |
Theo mặc định, chúng lấp đầy phần tử cha. Truyền height để cố định số dòng.
<List>
Danh sách ảo hóa. Mỗi dòng cao một ô.
<List items={requests} getLabel={(r) => `${r.method} ${r.path}`} onSelect={open}/>| Prop | Mô tả |
|---|---|
items | Mảng bất kỳ |
renderItem | (item, { highlighted, focused }) => ReactNode |
isItemDisabled | Mục con trỏ bỏ qua |
height | Số dòng hiển thị (mặc định: lấp đầy) |
highlightedIndex / onHighlight | Con trỏ có kiểm soát |
vimKeys | j k g G (mặc định true) |
<Table>
Các cột chia nhau chiều rộng còn lại trừ khi có đặt width. Tiêu đề và ô dùng cùng quy tắc flex nên luôn thẳng hàng.
| Trường của cột | Mô tả |
|---|---|
key | Id và hàm truy xuất mặc định |
width / grow | Số ô cố định hoặc tỷ lệ phần còn lại |
align | left right center |
value | Giá trị hiển thị và sắp xếp |
render | Nội dung ô tùy chỉnh |
compare | Cách sắp xếp tùy chỉnh |
Sắp xếp
Với sortable, nhấn số của cột để sắp xếp theo cột đó (nhấn lại để đảo chiều), s để chuyển lần lượt qua các cột và S để đảo chiều. Phép sắp xếp có tính ổn định. Dùng sort và onSortChange để kiểm soát.
Chọn
selectionMode="multiple" thêm cột đánh dấu; Space bật hoặc tắt lựa chọn cho dòng đang tô sáng. Dùng selectedKeys và onSelectionChange để kiểm soát lựa chọn, và getRowKey để có khóa ổn định.
<Tree>
Cây có thể mở rộng với các đường dẫn nhánh.
<Tree data={[{ id: "app", label: "app", children: [{ id: "page", label: "page.tsx", hint: "2.8 kB" }] }]} defaultExpanded={["app"]} onSelect={(node) => open(node.id)}/>→ mở rộng hoặc đi vào một nhánh. ← thu gọn hoặc chuyển đến nút cha. Space chuyển đổi trạng thái mở rộng. flattenTree(data, expanded) cung cấp các dòng đang hiển thị nếu bạn cần trình render riêng.