데이터 컴포넌트
<List>, <Table>과 <Tree>: 가상화, 정렬과 선택 지원.
<List>, <Table>, <Tree>는 대규모 데이터 세트를 표시해요. 화면에 보이는 행만 렌더링해요.
실시간72×13 · booting Turbolog…tsx
<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>
가상화된 목록이에요. 행 높이는 1셀이에요.
<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 | ID 및 기본 접근자 |
width / grow | 고정 셀 수 또는 남은 너비의 비율 |
align | left right center |
value | 표시 및 정렬에 쓰는 값 |
render | 사용자 지정 셀 콘텐츠 |
compare | 사용자 지정 정렬 |
정렬
sortable을 사용하면 열 번호를 눌러 해당 열로 정렬하고 (다시 누르면 방향 전환), s로 열을 순환하고 S로 방향을 전환해요. 정렬은 안정 정렬이에요. sort와 onSortChange로 제어하세요.
선택
selectionMode="multiple"은 체크 열을 추가해요. Space는 강조된 행의 선택 상태를 전환해요. selectedKeys와 onSelectionChange로 선택을 제어하고, getRowKey로 안정적인 키를 지정하세요.
<Tree>
안내선이 있는 펼칠 수 있는 트리예요.
실시간56×11 · booting Turbolog…tsx
<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)로 화면에 보이는 행을 가져올 수 있어요.