Table, List와 차트
직접 만든 행을 정렬 가능한 Table과 레이아웃을 밀어내지 않는 차트로 바꾸세요.
이 장의 내용
- 정렬 가능한 테이블
- 테이블 위의 차트
- 더 많은 컴포넌트
직접 만든 행을 컴포넌트로 바꾸세요: 키보드 탐색과 정렬을 지원하는 <Table>, 가상화 스크롤을 지원하는 <List>, 8분의 1 블록과 사분면 점으로 그리는 차트예요.
정렬 가능한 테이블
열은 객체 배열이에요. width가 없는 열은 grow에 따라 남은 공간을 나눠 쓰고, value는 정렬할 때 비교하는 값이며, render는 셀을 그려요.
추가: import { Table, type SortState, type TableColumn } from "@textjs/app";추가: 추가: const COLUMNS: TableColumn<Deployment>[] = [추가: { key: "status", header: "Status", width: 11, render: (d) => <Status status={d.status} /> },추가: { key: "commit", header: "Commit", grow: 2 },추가: { key: "project", header: "Project", width: 10 },추가: { key: "duration", header: "Build", width: 6, align: "right", value: (d) => d.duration, render: (d) => <Text>{`${d.duration}s`}</Text> },추가: ];export default function DeploymentsPage() {추가: const [sort, setSort] = useState<SortState | null>(null); …삭제: return rows.map((d) => …);추가: return <Table columns={COLUMNS} rows={rows} getRowKey={(d) => d.id} sortable sort={sort} onSortChange={setSort} autoFocus />;}테이블에 포커스가 있을 때 ↑ ↓는 강조 표시를 이동하고, s는 정렬할 열을 순환하며, S는 정렬 방향을 뒤집고, Enter는 onSelect를 호출해요. 긴 테이블은 보이는 행만 그려요.
테이블 위의 차트
<Sparkline>은 가장 최근 데이터 포인트로 상자를 채워요. <BarChart>는 레이블과 값을 정렬해 줘요.
추가: import { BarChart, Sparkline } from "@textjs/app";추가: 추가: const [chart, setChart] = useState<"spark" | "bars">("spark");추가: useInput((e) => {추가: if (e.input === "c") setChart((c) => (c === "spark" ? "bars" : "spark"));추가: });추가: return ( <Box className="flex-col grow gap-1">추가: <Box className="flex-col" height={4}>추가: <Text color="subtle">Build time, last 24 deployments</Text>추가: {chart === "spark" ? (추가: <Sparkline data={buildTimes} height={3} color="accent" />추가: ) : (추가: <BarChart data={byProject} formatValue={(v) => `${v}s`} />추가: )}추가: </Box> <Table … /> </Box> );차트 상자의 높이가 고정되어 있어서 차트를 전환해도 테이블이 움직이지 않고, 테이블의 행도 다시 인코딩되지 않아요.
더 많은 컴포넌트
<List>, <Tree>, <Tabs>, <Select>, <Input>, <Modal>, <Toaster>, <CommandPalette>, <ProgressBar>, <LineChart> 등의 사용법은 컴포넌트에 있어요.
사용해 보기
이 장을 마쳤을 때의 Acme Deploys 앱이 DevTools에서 실행 중이에요. 패드를 클릭한 뒤 아래 키를 사용하세요.
콘솔 열기
앱은 DevTools에서 렌더링돼요.먼저 Safari 설정 → 고급에서 ‘웹 개발자용 기능 보기’를 켜세요. 그다음 여기를 클릭하고 s를 누르세요.
데스크톱에서 열기
이 앱은 DevTools 콘솔에서 렌더링되므로 데스크톱 브라우저가 필요해요.
퀴즈
질문 2개장을 완료하려면 모든 문제에 답하세요.