Table
먼저 보고, 그다음 계약을 읽습니다
시맨틱 <table> 을 감싼 최소 표 — 가로 스크롤 래퍼 + 기본 표 스타일만.
Component intent의도와 경계 읽기
정렬·페이징·상태 dot 같은 로직이 없는 순수 프리미티브 표. 렌더 시 자동으로 `.axe-table-wrap`(overflow-x·테두리·radius) div 로 감싸고 그 안에 `.axe-table` <table> 을 놓는다. thead th / tbody td 는 element 셀렉터로 스타일되므로 소비자는 시맨틱 `<thead>/<tbody>/<th>/<td>` 마크업만 채우면 된다. 상호작용이 필요하면 DataTable, 운영자 상태 행이면 PipelineTable 을 쓴다.
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
import { Table } from "@axe/ui";<Table> <thead> <tr> <th scope="col">펀드</th> <th scope="col">약정액</th> <th scope="col">소진율</th> </tr> </thead> <tbody> <tr> <td>AXE 1호</td> <td>120억</td> <td>62%</td> </tr> <tr> <td>AXE 2호</td> <td>200억</td> <td>41%</td> </tr> </tbody></Table><div class="axe-table-wrap"> <table class="axe-table"> <thead> <tr> <th scope="col">펀드</th> <th scope="col">약정액</th> </tr> </thead> <tbody> <tr> <td>AXE 1호</td> <td>120억</td> </tr> </tbody> </table></div>Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
children | React.ReactNode | — | — | 표 내용 — `<thead>`·`<tbody>` 등. 내부 `<table>` 의 자식으로 그대로 렌더. |
...rest | React.TableHTMLAttributes<HTMLTableElement> | — | — | className 은 cn 으로 병합되어 안쪽 `<table>` 에 붙고(래퍼 div 아님), 나머지도 모두 `<table>` 로 전파. forwardRef 도 `<table>` 요소를 가리킨다. |
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-table-wrap | stable | 자동 생성되는 바깥 래퍼 div — overflow-x:auto·border·radius-md·elevated 배경. 좁은 뷰포트에서 가로 스크롤을 담당. |
.axe-table | stable | `<table>` 루트 — width 100%·border-collapse·sm 텍스트·tabular-nums. thead th / tbody td / tbody tr:hover 는 이 클래스 하위 element 셀렉터로 스타일됨(별도 클래스 없음). |
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
네이티브 `<table>` 시맨틱 그대로 — 컴포넌트가 role/aria 를 추가하지 않는다. 헤더 셀은 소비자가 `<th scope="col">`(또는 `scope="row"`)로 명시해야 스크린리더가 행/열 관계를 읽는다.
`.axe-table-wrap` 은 가로 스크롤 영역이지만 tabIndex 를 부여하지 않으므로 키보드만으로는 스크롤 포커스를 못 받는다 — 좁은 폭에서 키보드 접근이 중요하면 래퍼에 tabIndex/aria-label 을 직접 보강한다.