컴포넌트
Table
데이터를 행과 열로 표시합니다.
설치
pnpm dlx ply-ui add table공통 설치 설정을 먼저 적용합니다.
사용법
Header/Body 안에 Row를 구성하고 Head와 Cell을 구분합니다.
Caption으로 표의 목적을 설명하고 열 제목에 scope="col"을 지정합니다.
구성
| 구성 요소 | 역할 |
|---|---|
Table | 행과 열을 묶는 표입니다. |
TableCaption | 표의 이름이나 설명입니다. |
TableHeader / TableBody | 제목 행과 데이터 행 영역입니다. |
TableRow | 하나의 행입니다. |
TableHead | 제목 셀입니다. scope로 행 또는 열 제목을 지정합니다. |
TableCell | 데이터 셀입니다. |
구현 코드
components/ui/table.tsx
import type { ComponentProps } from "react";
import { cx } from "../../lib/cx";
import "./table.css";
export function Table({ className, ...props }: ComponentProps<"table">) {
return <table {...props} className={cx("rbx-table", className)} />;
}
export function TableHeader({ className, ...props }: ComponentProps<"thead">) {
return <thead {...props} className={cx("rbx-table-header", className)} />;
}
export function TableBody({ className, ...props }: ComponentProps<"tbody">) {
return <tbody {...props} className={cx("rbx-table-body", className)} />;
}
export function TableRow({ className, ...props }: ComponentProps<"tr">) {
return <tr {...props} className={cx("rbx-table-row", className)} />;
}
export function TableHead({ className, ...props }: ComponentProps<"th">) {
return <th {...props} className={cx("rbx-table-head", className)} />;
}
export function TableCell({ className, ...props }: ComponentProps<"td">) {
return <td {...props} className={cx("rbx-table-cell", className)} />;
}
export function TableCaption({
className,
...props
}: ComponentProps<"caption">) {
return <caption {...props} className={cx("rbx-table-caption", className)} />;
}
components/ui/table.css
/* table — semantic HTML composition. */
.rbx-table {
width: 100%;
border-collapse: collapse;
text-align: left;
}
.rbx-table-head,
.rbx-table-cell {
padding: 14px 16px;
border-bottom: 1px solid var(--rbx-color-stroke-default);
}
.rbx-table-head {
color: var(--rbx-color-content-muted);
font-size: 0.875rem;
font-weight: 600;
}
.rbx-table-caption {
padding: 12px;
color: var(--rbx-color-content-default);
font-size: 0.875rem;
}