Table
데이터를 행·열 구조로 표시하는 테이블 컴포넌트입니다.
기본
table_wrap으로 가로 스크롤을 지원합니다. columns로 열별 너비·패딩을 지정할 수 있습니다.
| 이름 | 역할 | 상태 |
|---|---|---|
| 홍길동 | 프론트엔드 | Active |
| 김철수 | 백엔드 | Active |
| 이영희 | 디자이너 | Away |
줄무늬
striped로 짝수 행에 배경색을 적용합니다.
| 제품 | 가격 | 재고 |
|---|---|---|
| 노트북 | 1,200,000원 | 24 |
| 키보드 | 89,000원 | 156 |
| 마우스 | 45,000원 | 89 |
| 모니터 | 350,000원 | 12 |
테두리
bordered로 모든 셀에 테두리를 적용합니다.
| ID | 항목 | 수량 |
|---|---|---|
| 001 | 사과 | 10 |
| 002 | 바나나 | 25 |
| 003 | 오렌지 | 8 |
컴팩트
compact로 셀 패딩을 줄여 밀도를 높입니다.
| 제품 | 가격 | 재고 |
|---|---|---|
| 노트북 | 1,200,000원 | 24 |
| 키보드 | 89,000원 | 156 |
| 마우스 | 45,000원 | 89 |
| 모니터 | 350,000원 | 12 |
호버
hover로 행에 마우스를 올리면 배경이 강조됩니다.
| 이름 | 역할 | 상태 |
|---|---|---|
| 홍길동 | 프론트엔드 | Active |
| 김철수 | 백엔드 | Active |
| 이영희 | 디자이너 | Away |
조합
bordered · compact · hover를 함께 조합할 수 있습니다.
| ID | 항목 | 수량 |
|---|---|---|
| 001 | 사과 | 10 |
| 002 | 바나나 | 25 |
| 003 | 오렌지 | 8 |
상단 고정
scroll + stickyTop으로 헤더를 상단에 고정합니다. scrollMaxHeight로 스크롤 영역 높이를 조절합니다.
| 이름 | 부서 | 직급 | 상태 |
|---|---|---|---|
| 홍길동 | 프론트엔드 | 시니어 | Active |
| 김철수 | 백엔드 | 리드 | Active |
| 이영희 | 디자인 | 시니어 | Away |
| 박민수 | QA | 주니어 | Active |
| 최지우 | 프론트엔드 | 주니어 | Active |
| 정수연 | 백엔드 | 시니어 | Busy |
| 한도윤 | 인프라 | 리드 | Active |
| 오세린 | 디자인 | 주니어 | Active |
좌측 고정
stickyLeft + stickyCols로 첫 열을 좌측에 고정합니다. 가로로 스크롤해 보세요.
| 이름 | 1월 | 2월 | 3월 | 4월 | 5월 | 6월 |
|---|---|---|---|---|---|---|
| 홍길동 | 120 | 132 | 101 | 134 | 90 | 230 |
| 김철수 | 220 | 182 | 191 | 234 | 290 | 330 |
| 이영희 | 150 | 232 | 201 | 154 | 190 | 330 |
| 박민수 | 320 | 132 | 151 | 134 | 110 | 130 |
좌측 고정 · 열 개수
stickyCols로 고정할 열 개수를 지정합니다. 2열 이상은 stickyLeftOffsets에 이전 열 너비 합을 넣습니다.
| 이름 | 부서 | 1월 | 2월 | 3월 | 4월 | 5월 |
|---|---|---|---|---|---|---|
| 홍길동 | 프론트 | 120 | 132 | 101 | 134 | 90 |
| 김철수 | 백엔드 | 220 | 182 | 191 | 234 | 290 |
| 이영희 | 디자인 | 150 | 232 | 201 | 154 | 190 |
| 박민수 | QA | 320 | 132 | 151 | 134 | 110 |
상단 · 좌측 고정
stickyTop과 stickyLeft를 함께 쓰면 헤더와 좌측 열이 동시에 고정됩니다.
| 이름 | 1월 | 2월 | 3월 | 4월 | 5월 | 6월 |
|---|---|---|---|---|---|---|
| 홍길동 | 120 | 132 | 101 | 134 | 90 | 230 |
| 김철수 | 220 | 182 | 191 | 234 | 290 | 330 |
| 이영희 | 150 | 232 | 201 | 154 | 190 | 330 |
| 박민수 | 320 | 132 | 151 | 134 | 110 | 130 |
| 최지우 | 180 | 162 | 171 | 144 | 210 | 250 |
| 정수연 | 240 | 212 | 181 | 194 | 260 | 280 |
| 한도윤 | 110 | 142 | 121 | 164 | 170 | 200 |
| 오세린 | 200 | 192 | 211 | 184 | 230 | 310 |
API · Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
bordered | boolean | false | 셀 테두리 (table_bordered) |
striped | boolean | false | 줄무늬 행 (table_striped) |
compact | boolean | false | 좁은 패딩 (table_compact) |
hover | boolean | false | 행 호버 강조 (table_hover) |
wrap | boolean | true | table_wrap 스크롤 래퍼 사용 |
scroll | boolean | false | sticky용 스크롤 컨테이너 (table_wrap-scroll) |
scrollMaxHeight | string | — | --table-scroll-max-height (예: 14rem · none) |
stickyTop | boolean | false | thead 상단 고정 (table_sticky-top) |
stickyLeft | boolean | false | 좌측 열 고정 (table_sticky-left) |
stickyCols | 1 | 2 | 3 | 4 | 1 | 좌측 고정 열 개수 (table_sticky-cols-n). stickyLeft와 함께 사용 |
stickyLeftOffsets | Record<number, string> | {} | n번째 고정 열 left 오프셋. { 2: '7rem' } → --table-sticky-left-2 |
columns | TableColumn[] | [] | 열 너비·패딩. { width, minWidth, maxWidth, padding, nowrap } — colgroup·CSS 변수로 적용 |
className | string | — | table_wrap(또는 table) 루트에 추가 클래스 |
API · Children
| Children | 설명 |
|---|---|
children | thead · tbody · tfoot 등 테이블 마크업 (Vue default 슬롯 대응) |
클래스 · 속성
React 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.
| 클래스 | 설명 |
|---|---|
table_wrap | 가로 스크롤 래퍼 |
table_wrap-scroll | sticky용 스크롤 컨테이너 (overflow · max-height) |
table | 테이블 루트 |
table_columns | columns prop 사용 시 고정 레이아웃·열별 패딩 |
table_bordered · table_striped · table_compact · table_hover | 스타일 변형 |
table_sticky-top | thead 상단 고정 |
table_sticky-left | 좌측 열 고정 (table_sticky-cols-n과 함께 사용) |
table_sticky-cols-1 … table_sticky-cols-4 | 좌측 고정 열 개수. 2열 이상은 --table-sticky-left-n 필요 |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--table-cell-padding-y · --table-cell-padding-x | 0.65rem · 1rem | 셀 패딩 |
--table-cell-padding-y-compact · --table-cell-padding-x-compact | 0.4rem · 0.75rem | compact 패딩 |
--table-font-size · --table-header-font-weight | var(--text-size-sm) · 600 | 본문·헤더 타이포 |
--table-scroll-max-height | 16rem | table_wrap-scroll 최대 높이 |
--table-sticky-left-n | 0 (1열) | n번째 고정 열의 left 오프셋 (이전 열 너비 합) |
--table-sticky-shadow | 2px 0 4px -2px … | 좌측 고정 끝 열 그림자 |