Table

@hua-labs/ui

v1.1.0

헤더, 본문, 푸터 섹션이 있는 테이블 형태의 데이터를 표시하는 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

기본 테이블

이름	이메일	역할	상태
John Doe	john@example.com	Admin	Active
Jane Smith	jane@example.com	Editor	Active
Bob Wilson	bob@example.com	Viewer	Inactive

줄무늬 + 호버

사용 가능한 제품 목록
상품명	가격	재고	카테고리
Laptop Pro	$1,299	45	Electronics
Wireless Mouse	$29	120	Accessories
USB Hub	$49	80	Accessories
Monitor 27"	$399	25	Electronics

Bordered 스타일

항목	수량	금액
서비스 A	1	$100.00
서비스 B	2	$200.00
합계	3	$300.00

Props

이름	타입	기본값	설명
`variant`	`"default" \| "bordered" \| "striped"`	`"default"`	테이블 스타일 변형
`size`	`"sm" \| "md" \| "lg"`	`"md"`	테이블 크기
`children*`	`React.ReactNode`	-	TableHeader, TableBody, TableFooter 컴포넌트

코드 예시

docs:common.basicUsagetsx

1// Via framework (recommended)
2import {
3  Table,
4  TableHeader,
5  TableBody,
6  TableRow,
7  TableHead,
8  TableCell,
9} from '@hua-labs/ui/data';
10// Or direct import
11// import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@hua-labs/ui/data';
12 
13<Table>
14  <TableHeader>
15    <TableRow>
16      <TableHead>Name</TableHead>
17      <TableHead>Email</TableHead>
18      <TableHead>Role</TableHead>
19    </TableRow>
20  </TableHeader>
21  <TableBody>
22    <TableRow>
23      <TableCell>John Doe</TableCell>
24      <TableCell>john@example.com</TableCell>
25      <TableCell>Admin</TableCell>
26    </TableRow>
27  </TableBody>
28</Table>

docs:components.table.examples.stripedtsx

1<Table variant="striped">
2  <TableHeader>
3    <TableRow>
4      <TableHead>Product</TableHead>
5      <TableHead>Price</TableHead>
6    </TableRow>
7  </TableHeader>
8  <TableBody>
9    <TableRow variant="hover">
10      <TableCell>Item A</TableCell>
11      <TableCell>$10.00</TableCell>
12    </TableRow>
13    <TableRow variant="hover">
14      <TableCell>Item B</TableCell>
15      <TableCell>$20.00</TableCell>
16    </TableRow>
17  </TableBody>
18</Table>

하위 컴포넌트

• TableHeader - 테이블 헤더 영역
• TableBody - 테이블 본문 영역
• TableFooter - 테이블 푸터 영역
• TableRow - 테이블 행
• TableHead - 헤더 셀
• TableCell - 데이터 셀
• TableCaption - 테이블 캡션

접근성

•시맨틱 HTML: 적절한 테이블 요소 사용 (table, thead, tbody, th, td)
•키보드 탐색: 기본 테이블 키보드 탐색 지원
•스크린 리더: 스크린 리더를 위한 적절한 헤더 연결

ColorPickerPro CodeBlock