Table
테이블은 정렬·필터링·선택 가능한 행 형태로 데이터를 표시하는 컴포넌트입니다. 사용자, 회사, 파일, 거래 내역 등 구조화된 데이터를 한눈에 보여줄 때 사용합니다.
Figma 컴포넌트: Table, Table header cell, Table cell
Default
가장 기본적인 형태로, columns 배열에 헤더 정보를 정의하고 data 배열로 행을 채웁니다.
Selectable rows
selectable 속성으로 행 선택 체크박스를 추가할 수 있습니다. 헤더 체크박스는 전체 선택 / 전체 해제로 동작합니다.
Sizes
sm, md, lg 세 가지 크기를 지원합니다.
Custom cell render
각 컬럼에 render 함수를 두면 셀을 자유롭게 커스터마이즈할 수 있습니다. UserCell, StatusBadge는 헬퍼 컴포넌트로 함께 export 됩니다.
Sortable header
컬럼에 sort 속성으로 정렬 화살표를 표시할 수 있습니다 ('asc', 'desc', 'none').
Empty state
데이터가 없을 때는 emptyText로 안내 문구를 표시합니다.
StatusBadge
테이블 셀 안에서 자주 사용되는 상태 뱃지입니다. success, warning, error, gray, brand, info 6가지 variant를 지원합니다.
Props
Table
| Prop | Type | Default | Description |
|---|---|---|---|
columns | Column[] | [] | 컬럼 정의 배열 (Column 구조는 아래 참고) |
data | object[] | [] | 행 데이터 배열 |
size | 'sm' | 'md' | 'lg' | 'md' | 테이블 사이즈 |
selectable | boolean | false | 행 선택 체크박스 표시 |
onSelect | (indices: number[]) => void | - | 선택 변경 콜백 |
emptyText | string | '데이터가 없습니다.' | 데이터가 없을 때 표시되는 텍스트 |
Column
| Prop | Type | Default | Description |
|---|---|---|---|
key | string | - | data 객체의 키 (render 미지정 시 row[key]를 표시) |
header | ReactNode | - | 헤더 라벨 |
render | (row, index) => ReactNode | - | 커스텀 셀 렌더링 함수 |
align | 'left' | 'center' | 'right' | 'left' | 셀 정렬 |
width | string | number | - | 컬럼 너비 (CSS 값) |
sort | 'asc' | 'desc' | 'none' | - | 정렬 화살표 표시 |
StatusBadge
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'gray' | 'success' | 'warning' | 'error' | 'brand' | 'info' | 'gray' | 뱃지 색상 |
dot | boolean | true | 좌측 점 표시 여부 |
children | ReactNode | - | 뱃지 텍스트 |
UserCell
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | - | 아바타 이미지 URL |
name | string | - | 주요 텍스트 (이름) |
email | string | - | 보조 텍스트 (이메일) |
initials | string | - | src 없을 때 표시할 이니셜 |
avatarSize | number | 32 | 아바타 픽셀 크기 |
Figma Variants
| Property | Values |
|---|---|
| Size | sm md lg |
| Cell type | Text Avatar Badge Badges multiple Avatar group Action buttons Action icons Trend positive Trend negative Progress bar Star ratings Select dropdown Calendar File type icon Payment method |
| Header | Text=True/False Checkbox=True/False Help icon Arrow=Up/Down/Chevron |
| Dividers | Divider line Alternating fills |
| Breakpoint | Desktop Mobile |