Table
여러 항목의 같은 속성을 비교할 때 써요.
변형
Figma 원본의 모든 variant예요. hover, focus는 컴포넌트가 처리해서 따로 그리지 않아요.
| 이름 | 상태 | 요청 수 |
|---|---|---|
| production | 활성 | 12,480 |
| github-actions | 활성 | 3,215 |
| local-dev | 만료 예정 | 0 |
| 내용 |
|---|
| 내용 |
|---|
| 내용 |
| 내용 |
| 내용 |
|---|
| 내용 |
| 내용 |
사용법
- 행 높이 40좌우 padding space/3, 행 아래 1px border/default.
- 숫자 열은 monoalign="end"인 본문 칸은 숫자라서 mono예요.
- 줄무늬는 쓰지 않아요구분은 선 하나로 충분해요. hover 바탕은 누를 수 있는 행(interactive)에만 둬요.
- 상태 관리가 필요하면 DataGridsort, selected, pinned는 모양만 바꿔요. 정렬·선택·이동 상태는 DataGrid가 관리해요.
Props
| prop | 값 | 기본값 |
|---|---|---|
| TableHead · TableCell align | start · end (숫자 열은 end) | start |
| TableHead sort · onSort | asc · desc · none. onSort를 넘기면 머리글이 버튼 + aria-sort | — |
| TableRow selected · interactive · dragging | 선택 bg/selected, hover bg/subtle(interactive), 이동 중 모양 | false |
| TableHead · TableCell pinned | left · right. 가로 스크롤 중에도 붙어 있어요 | — |
| Table | 부모보다 넓으면 가로 스크롤 | — |
코드
tsx
<Table>
<TableHeader><TableRow><TableHead>이름</TableHead><TableHead align="end">요청 수</TableHead></TableRow></TableHeader>
<TableBody><TableRow><TableCell>production</TableCell><TableCell align="end">12,480</TableCell></TableRow></TableBody>
</Table>