Table
데이터를 행과 열로 구성하여 표시하는 테이블 컴포넌트
개요
Table 컴포넌트는 네이티브 <table> 요소를 래핑하여 일관된 스타일과 크기를 제공합니다. Header, Body, Footer, Caption 등의 서브 컴포넌트로 구성되며, 행 선택 및 줄무늬(striped) 표시를 지원합니다.
주요 특징
- ✅ 크기 옵션: xs, sm, md, lg, xl 5가지 크기
- ✅ 서브 컴포넌트: Header, Body, Footer, Head, Row, Cell, Foot, Caption
- ✅ 행 상태: 호버, 선택(selected), 줄무늬(striped) 상태 스타일
- ✅ Caption: 테이블 설명 텍스트 제공
- ✅ 접근성: 시맨틱 마크업 기반
- ✅ 디자인 토큰: 테마 커스터마이징 지원
Sizes
Table은 5가지 크기를 지원합니다. 기본값은 md입니다. size prop은 Table에 지정하면 하위 TableHead, TableCell, TableFoot에 Context를 통해 자동으로 전달됩니다.
Preview
size=“xs”
| Invoice | Status | Amount |
|---|---|---|
| INV001 | Paid | $250.00 |
| INV002 | Pending | $150.00 |
size=“sm”
| Invoice | Status | Amount |
|---|---|---|
| INV001 | Paid | $250.00 |
| INV002 | Pending | $150.00 |
size=“md” (기본)
| Invoice | Status | Amount |
|---|---|---|
| INV001 | Paid | $250.00 |
| INV002 | Pending | $150.00 |
size=“lg”
| Invoice | Status | Amount |
|---|---|---|
| INV001 | Paid | $250.00 |
| INV002 | Pending | $150.00 |
size=“xl”
| Invoice | Status | Amount |
|---|---|---|
| INV001 | Paid | $250.00 |
| INV002 | Pending | $150.00 |
사용 예시
기본
헤더, 바디로 구성한 기본 테이블입니다.
Preview
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
Caption
TableCaption을 사용해 테이블에 설명 텍스트를 추가합니다.
Preview
| Invoice | Status | Amount |
|---|---|---|
| INV001 | Paid | $250.00 |
| INV002 | Pending | $150.00 |
| INV003 | Unpaid | $350.00 |
Footer
TableFooter와 TableFoot를 사용해 합계 등의 요약 정보를 표시합니다.
Preview
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| Total | $750.00 | ||
줄무늬 행 (Striped Rows)
홀짝 행에 data-striped="true"를 지정하면 번갈아 배경색이 적용됩니다.
Preview
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| INV004 | Paid | Credit Card | $450.00 |
선택된 행 (Selected Row)
TableRow에 data-state="selected"를 지정하면 선택 상태 스타일이 적용됩니다.
Preview
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
API Reference
Table
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | 크기. 하위 Head/Cell/Foot에 Context로 전달됨 |
className | string | - | 추가 CSS 클래스 |
children | React.ReactNode | - | 테이블 내용 |
TableRow
| Prop | Type | Default | Description |
|---|---|---|---|
data-state | "selected" | - | 행 선택 상태. "selected" 지정 시 선택 배경색 적용 |
data-striped | boolean | - | 줄무늬 상태. true 지정 시 줄무늬 배경색 적용 |
className | string | - | 추가 CSS 클래스 |
children | React.ReactNode | - | 행 내용 |
TableHead / TableCell / TableFoot
| Prop | Type | Default | Description |
|---|---|---|---|
colSpan | number | - | 열 병합 |
rowSpan | number | - | 행 병합 |
className | string | - | 추가 CSS 클래스 |
children | React.ReactNode | - | 셀 내용 |
TableCaption
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | 추가 CSS 클래스 |
children | React.ReactNode | - | 캡션 텍스트 |
기본 사용법
import {
Table,
TableHeader,
TableBody,
TableFooter,
TableHead,
TableRow,
TableCell,
TableFoot,
TableCaption,
} from "@vortex/ui-foundation"
<Table size="md">
<TableCaption>A list of invoices.</TableCaption>
<TableHeader>
<TableRow>
<TableHead>Invoice</TableHead>
<TableHead>Status</TableHead>
<TableHead className="text-right">Amount</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>INV001</TableCell>
<TableCell>Paid</TableCell>
<TableCell className="text-right">$250.00</TableCell>
</TableRow>
</TableBody>
<TableFooter>
<TableRow>
<TableFoot colSpan={2}>Total</TableFoot>
<TableFoot className="text-right">$250.00</TableFoot>
</TableRow>
</TableFooter>
</Table>접근성
시맨틱 마크업
- 네이티브
<table>,<thead>,<tbody>,<tfoot>,<th>,<td>,<caption>요소 기반 <caption>은 스크린 리더에서 테이블 목적을 전달하므로 적극 활용 권장
권장 사항
- ✅
TableCaption으로 테이블 목적 설명 제공 - ✅
TableHead(<th>)로 열 제목 마크업하여 접근성 보장 - ✅ 복잡한 테이블에서
scope속성 추가 고려 - ❌ 레이아웃 목적으로 테이블 사용 지양
관련 컴포넌트
- Badge: 상태 표시
Last updated on