사용법
기본
Table.Header, Table.Body, Table.Row, Table.Head, Table.Cell로 행·열 데이터를 구성해요.
| 문서 | 상태 | 수정일 |
|---|---|---|
| 디자인 시스템 가이드 | 공개 | 2026-06-20 |
| API 레퍼런스 | 초안 | 2026-06-18 |
검색·필터·정렬
TablePanel과 TableToolbar로 검색·필터 UI를 붙이고, Table.SortableHead와 useClientTable로 클라이언트 정렬·검색을 처리할 수 있어요.
| 디자인 시스템 가이드 | 공개 | 2026-06-20 |
| API 레퍼런스 | 초안 | 2026-06-18 |
| 온보딩 체크리스트 | 공개 | 2026-06-15 |
| 릴리스 노트 | 보관 | 2026-06-10 |
줄무늬
variant="striped"로 짝수 행 배경을 구분해 가독성을 높여요.
| 항목 | 값 |
|---|---|
| 방문자 | 1,240 |
| 전환 | 86 |
스타일 커스터마이징
Table 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.
className / style
<Table
className="shadow-md"
style={{
--gtd-table-bg: "#059669",
}}
/>classNames 슬롯
복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.
<Table
classNames={{
panel: "my-table-panel",
toolbar: "my-table-toolbar",
toolbarSearch: "my-table-toolbarSearch",
toolbarFilter: "my-table-toolbarFilter",
wrap: "my-table-wrap",
root: "my-table-root",
headCell: "my-table-headCell",
cell: "my-table-cell",
empty: "my-table-empty"
}}
/>CSS 변수
| 변수 | 설명 |
|---|---|
| --gtd-table-bg | 테이블 배경 |
| --gtd-table-border-color | 테두리색 |
| --gtd-table-head-bg | 헤더 배경 |
| --gtd-table-row-hover-bg | 행 호버 배경 |
인터페이스
TableProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| variant | "default" | "striped" | default | 행 스타일 |
| size | "sm" | "md" | md | 셀 패딩 |
| TablePanel | ReactNode | — | 툴바+테이블 래퍼 |
| Table.SortableHead | ReactNode | — | 정렬 가능한 헤더 셀 |
| useClientTable | hook | — | 클라이언트 검색·필터·정렬 상태 |
| classNames | Record<string, string> | — | 슬롯별 클래스 (root, label, input 등) |
| className | string | — | 루트 요소 클래스. Tailwind·커스텀 CSS 적용 |
| style | CSSProperties | — | 인라인 스타일·CSS 변수(--gtd-*) 오버라이드 |
Table 컴포넌트 Props 표
가져오기
import { Table } from "@/components/ui/Table";