Components
Table
Overview
Table은 합성 컴포넌트입니다. Table · Header · Body · Footer · Row · Head · Cell · Caption을 조합합니다. 각 파트는 native HTML 테이블 요소를 감싸며, colSpan · scope · headers 등 native 속성을 props로 그대로 받습니다. 셀 패딩은 반응형입니다(모바일 compact · md+ medium). Head/Cell className의 패딩이 기본값보다 우선합니다. 색상 커스텀은 TableHeader · TableRow 등 각 파트 className으로 전달합니다.
Header · Body · Row · Head · Cell 조합. 데이터를 map해 Row를 렌더합니다.
| 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 |
TableCaption으로 표의 목적을 설명합니다.
| 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 |
TableRow에 data-state="selected"를 주면 선택 행 스타일이 적용됩니다. selected가 없는 테이블에서는 무시됩니다.
| 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 |
INV002 행에 data-state="selected"를 적용했습니다.
TableHeader · TableRow className으로 배경을 커스텀합니다. 기본은 tokens, 예시는 임의 색(emerald)입니다.
Default (tokens)
| Y/N | 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 |
Custom via className
| Y/N | 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 |
TableHeader className="bg-emerald-50"· TableRow className="hover:bg-emerald-50 data-[state=selected]:bg-emerald-100"처럼 각 파트에 직접 전달합니다.
열이 많을 때 래퍼가 가로 스크롤됩니다. containerClassName으로 래퍼를 조정합니다. check box 등 다른 컴포넌트와 조합하여 사용자가 열을 선택할 수 있습니다.
| No. | ID | Customer | Plan | Region | Seats | |
|---|---|---|---|---|---|---|
| 1 | Acme Corp | billing@acme.example | Enterprise | APAC | 120 | $4,800 |
| 2 | Northwind | ops@northwind.example | Pro | EMEA | 45 | $1,350 |
| 3 | Contoso | hello@contoso.example | Free | NA | 8 | $0 |